1. npm init -y
  3. npm i -D webpack webpack-cli
  4. 创建src文件夹 index.js

  • 打包生成的文件是个自执行函数，传入给函数中 modules 的值是个对象，key: value ```javascript {“./src/index.js”: /*/ (function(module, exports, webpack_require) { 因为又引入了test.js文件 传了webpack_require函数

    eval(“console.log(‘hello 你好aaaaaaaaaa’)\r\nconst test = webpack_require(/! ./test.js / \”./src/test.js\”)\r\nconsole.log(test)\n\n//# sourceURL=webpack:///./src/index.js?”);

    /*/ }) }

/**/ function webpack_require(moduleId) { moduleId => key /**/ /**/ // Check if module is in cache // 在缓存中 直接返回 /**/ if(installedModules[moduleId]) {
/**/ return installedModules[moduleId].exports; /**/ } /**/ // Create a new module (and put it into the cache) /**/ var module = installedModules[moduleId] = { /**/ i: moduleId, /**/ l: false, /**/ exports: {} /**/ }; /**/ /**/ // Execute the module function // call 就是执行 /**/ modules[moduleId].call(module.exports, module, module.exports, webpack_require); /**/ /**/ // Flag the module as loaded /**/ module.l = true; /**/ /**/ // Return the exports of the module /**/ return module.exports; /**/ }

  2. - npx webpack --config webpack.config.my.js
  3. - npm run build -- --config webpack.config.my.js     -- 后面的参数变成字符串
  5. ```javascript
  6. npm i -D webpack-dev-server
  8. devServer: {
  9.     port: 3000,
  10.   progress: true,
  11.   contentBase: './dist',
  12.   compress: true
  13. }
  15. output: {
  16.         filename: 'bundle.[hash:8].js',// 只显示8位
  17.         path: path.resolve('build')
  18.     },

  • 配置loader

    1. modelues: {
    2.   rules: [
    3.   {
    4.       test: '/.css$/',
    5.     use: [{
    6.         loader: 'style-loader',
    7.       options: {
    8.           insert: 'top'
    9.       }
    10.     }, 'css-loader']
    11.   },
    12.   {
    13.               test: /.css$/,
    14.               use: [
    15.                   MiniCssExtractPlugin.loader // 抽离css 单独文件
    16.                   , 'css-loader']
    17.           },
    18.   {
    19.               test: /.css$/,
    20.               use: [
    21.                   MiniCssExtractPlugin.loader, 
    22.                   'css-loader',
    23.                   'postcss-loader',
    24.                   'less-loader'
    25.                   ]
    26.           }
    27. ]
    28. }

  • 自动添加浏览器前缀

npm i -D postcss-loader autoprefixer

js高级语法=> es5

  1. {
  2.   test: /.js$/,
  3.     use: {
  4.       loader: 'babel-loader',
  5.         options: {
  6.           // 用babel-loader es6=> es5
  7.           presets: [// 大插件库 里面有模块处理
  8.             '@babel/preset-env'
  9.           ],
  10.             plugins: [
  11.               '@babel/plugin-proposal-class-properties'
  12.             ]
  13.         }
  14.     }
  15. },
  • @babel/plugin-transform-runtime ，解决 ，正常es6转es5 ，不能解析 promise 或者 generator 语法，这是内置的。
  • 安装 @babel/runtime —save ， exclude : /node_modules/

    实例上的语法 includes 不能解析 需要引入 @babel/polyfill —save , require(‘@babel/polyfill)’)

  1. {
  2.   test: /.js$/,
  3.     use: {
  4.       loader: 'eslint-loader',
  5.         options: {
  6.           enforce: 'pre' // previous 正常是从下到上执行， 加上会先执行
  7.         }
  8.     },
  9.       include: path.resolve('src'),
  10.         exclude: /node_modules/
  11. },