码迷,mamicode.com
首页 > 其他好文 > 详细

简单的打包

时间:2019-06-08 00:30:35      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:filename   xxxx   class   test   specified   resolve   error:   文件   ice   

  1. 安装 node ,到  https://nodejs.org/zh-cn/ 下载安装

  2. 安装 webpack4.x({开发依赖)

    cnpm i -D webpack webpack-cli

     

  3. 新建app.js文件作为入口文件(使用了下面的几种导入文件方式)

    app.js
    import ‘./es6‘;
    require(‘./common‘);
    require(‘./amd‘);
    
    // npx webpack app.js
    console.log(‘app‘);

    es6.js

    export default ‘es6‘;
    console.log(‘es6‘);

     

    common.js

    module.exports = ‘commonjs‘;
    console.log(‘common-js‘);

     

    amd.js

    define(function () {
       console.log(‘requires-js‘)
    });

     

     

  4. 简单打包(生成目标文件 ./dist/main.js)

    npx webpack app.js
  5. 使用配置文件

    // npx webpack --config xxxx-config.js
    
    const path = require(‘path‘);
    module.exports = {
        entry: {
            app: ‘./src/app.js‘
        },
        output: {
            path: path.join(path.resolve(__dirname), ‘dist‘),
            filename: "[name].bundle.[hash:8].js"
        },
    };

    npx webpack 直接就可以打包了(默认会先找项目中的webpack, 其次才是全局的webpack)

  6. 使用脚本命令打包简单配置
    {
      "name": "test",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack --mode=development",
        "build": "webpack --mode=production"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "webpack": "^4.33.0",
        "webpack-cli": "^3.3.2"
      }
    }

    npm run dev 代码不压缩(开发环境),生产环境  npm run build,(mode 参数决定是什么环境)

 

 

 

 

简单的打包

标签:filename   xxxx   class   test   specified   resolve   error:   文件   ice   

原文地址:https://www.cnblogs.com/heidekeyi/p/10989560.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!