kingmj / my-webpack-cli

webpack的脚手架

my-webpack-cli

webpack 脚手架基础版，包含以下内容

多页面入口文件

entry: {
    home: './app/home/home.js',
    about: './app/about/about.js',
    contact: './app/contact/contact.js'
}

loader 配置

包含了基础的图片、字体、css、sass、postcss、babel 等 loader

mode 模式配置

通过 webpack-merge 插件分离开发与生产环境配置，所以项目里包含:

• webpack.common.js：公共的配置文件
• webpack.dev.js：适用于开发环境的配置
• webpack.prod.js：适用于生产环境的配置

package.json 文件里面包含：dev-server、dev和build，使用npm run对应的脚本即可启动

"dev-server": "webpack-dev-server --open --colors --config webpack.dev.js",
"dev": "webpack --config webpack.dev.js --colors",
"build": "webpack --config webpack.prod.js --colors",

• build用于构建生产环境脚本

• dev-server使用webpack-dev-server来作为服务器，须注释掉watch:true，取消注释devServer部分

   // watch: true,
  devServer: {
      contentBase: path.resolve(__dirname, 'public'),  //指定public资源地址（非项目打包的资源，比如：字体、图片等资源）
      publicPath: '/dist/',   //指定服务器根目录（http://localhost:9000/dist）
      compress: true,
      port: 9000
  },
  
  

• dev使用webpack's Watch Mode来监听文件的改变

  watch: true,
  // devServer: {
  //     contentBase: path.resolve(__dirname, 'public'),  //指定public资源地址（非项目打包的资源，比如：字体、图片等资源）
  //     publicPath: '/dist/',   //指定服务器根目录（http://localhost:9000/dist）
  //     compress: true,
  //     port: 9000
  // },
  
  

插件使用

• clean-webpack-plugin 每次构建前清除 dist文件夹，所有环境都包括
• mini-css-extract-plugin 生产环境，提取样式到 css 文件
• webpack-manifest-plugin 生产环境，生成文件 hash 映射

其他注意事项

• 默认安装了babel-polyfill，为了兼容低版本浏览器，最好在入口文件中加上import 'babel-polyfill'

• 如果不使用默认的严格模式，请自行安装babel-plugin-transform-remove-strict-mode 插件

  npm i -D babel-plugin-transform-remove-strict-mode
  
  //webpack中配置：
  {
  test: /\.js$/,
  exclude:
      /(node_modules|bower_components)/,
  use:
      {
          loader: 'babel-loader',
          options:
              {
                  presets: ['env'],
                  plugins: ['transform-remove-strict-mode']
              }
      }
  }
  

• 浏览器访问http://localhost:9000/webpack-dev-server可以看到dev-server里面文件的结构