webpack4脚手架搭建-基础版

后续 react 版

node环境，项目目录，初始化... 等非配置相关操作在此略过！
总体兼容到ie9，持续维护中，致力理清webpack原生配置，实用为主，抵制第三方高度封装的脚手架，欢迎各种吐槽！

实现功能：

• es6兼容 语法检测 代码压缩
• css兼容（ie10） 样式分离 代码压缩
• html 代码压缩
• 代理服务
• 数据模拟

预期实现功能

• 模块热替换（目前只能实时刷新） js库代码分离 css兼容 hash值缓存控制

环境

npm install --save-dev webpack webpack-cli webpack-merge

通用-webpack.base.conf.js

js

• 兼容：
  npm install --save-dev babel-loader babel-cli babel-preset-env babel-preset-stage-2

• 配置：

  1. 创建.babelrc,用于babel调用的插件配置
     { "presets": ["env","stage-2"] }

• 补充：

  1. Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，所以需要babel-polyfill来实现。
     npm install --save-dev babel-polyfill

• 配置：

  1. webpack.base.conf.js入口文件配置：
     entry: ['babel-polyfill', './src/index.js'],

• 语法检测：
  npm install --save-dev eslint eslint-loader babel-eslint

• 压缩：
  const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); new UglifyJSPlugin(),

CSS

npm install --save-dev style-loader css-loader less less-loader sass-loader node-sass  

• 样式分离：
  npm install --save-dev extract-text-webpack-plugin@next

• 配置：
  const ExtractTextPlugin = require("extract-text-webpack-plugin");
rules: [
... { test: /.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) } ]
plugins: [
new ExtractTextPlugin("styles.css"),
]

• 压缩：
  npm install --save-dev optimize-css-assets-webpack-plugin

• 兼容：
  npm install --save-dev autoprefixer postcss-loader

• 配置：

  1. 新建 postcss.config.js
     // 处理css前缀，用来更好的兼容各种浏览器,在 package.json中 使用 browserslist 字段已经定义好了浏览器适配（官方推荐）
module.exports = { plugins: [ require('autoprefixer') ] }
  2. 在 package.json 中添加字段
     "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ],

html

npm install --save-dev html-webpack-plugin

文件

npm install --save-dev url-loader

其他

npm install --save-dev clean-webpack-plugin // 清理/dist文件夹  
npm install --save axios // 数据请求库
npm install --save-dev webpack-spritesmith // 雪碧图
npm install --save lodash jquery@1.x js-cookie moment // js常用函数库

调试

1. *配置：webpack.dev.conf.js*  
<code>devtool: 'inline-source-map',</code>  

开发服务器

1. *使用webpack-dev-server 提供的简单的 web 服务器，实时重新加载(live reloading)：*  
<code>npm install --save-dev webpack-dev-server</code>  
2. *配置：webpack.dev.conf.js*  
<code>devServer: {
    contentBase: './dist',
    hot: true
},</code>  
3. 数据模拟
npm install --save-dev webpack-api-mocker
项目根目录创建mock文件夹，创建数据文件index.js,配置:  
const apiMocker = require('webpack-api-mocker');  
before(app) {
	apiMocker(app, path.resolve(__dirname, './mock/index.js'));
}

相关链接

完整代码，移步 项目