webpack前端自动化框架搭建（一）
1.创建文件夹webpack_demo
2.运行cmd
cd webpack_demo3.初始化npm管理package.json
npm init4.创建如下文件夹目录
5.在根目录下创建webpack.config.js，定义输入和输出
var path = require('path');
function resolve(_path) {
return path.posix.join(__dirname, _path);
}
module.exports = {
entry: {
main: resolve('src/main.js')
},
output: {
path: resolve('dist'),
filename: 'assets/js/[name].[hash:7].js'
}
};6.在项目中，很多地方要用到es6、es7的语法，而浏览器很多语法不能被支持，所以这里我们使用babel-loader进行编译，在webpack配置中，module属性专门用来配置loader
- 安装babel相关组件
npm install --save-dev babel-loader babel-core babel-preset-env webpack- 在webpack.config.js文件中做相关配置
var path = require('path');
function resolve(_path) {
return path.posix.join(__dirname, _path);
}
module.exports = {
entry: {
main: resolve('src/main.js')
},
output: {
path: resolve('dist'),
filename: 'assets/js/[name].[hash:7].js'
},
module: {
rules: [{
test: /\.js$/,
use: {
loader: 'babel-loder'
},
exclude: /(node_modules|bower_components)/
}]
}
};
- 根目录下新建.babelrc文件，配置如下
{
"presets": ["env"]
}- 这里es6、es7 js编译配置完成了，目录结构如下
7.css文件的编译，css的编译需要分为几步
- 我们使用postcss进行自动为不同的浏览器添加对应的前缀，首先安装postcss-loader和autoprefixer
cnpm instal postcss-loader autoprefixer --save-dev- 在根目录新建文件postcss.config.js,引入autoprefixer
module.exports = {
plugins: [
require('autoprefixer')
]
};
- webpack提供两个工具处理样式表，css-loader和style-loader，二者处理的任务不同，css-loader使你能够使用类似@import和url(…)的方法实现require的功能，style-loader将所有的计算后的样式加入页面中，二者组合在一起能使你能够把样式表嵌入webpack打包后的js文件中
cnpm install css-loader style-laoder --save-dev3.配置文件如下
var path = require('path');
function resolve(_path) {
return path.posix.join(__dirname, _path);
}
module.exports = {
entry: {
main: resolve('src/main.js')
},
output: {
path: resolve('dist'),
filename: 'assets/js/[name].[hash:7].js'
},
module: {
rules: [{
test: /\.js$/,
use: {
loader: 'babel-loader'
},
exclude: /(node_modules|bower_components)/
}, {
test: /\.css$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'postcss-loader'
}]
}]
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
"@": resolve('src'),
"@static": resolve('static')
}
}
};
9.插件plugin
插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。
Webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成更加丰富的功能。
10.使用插件的方法
要使用某个插件，我们需要通过npm安装它，然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例（plugins是一个数组)
11.js压缩，js压缩需要使用UglifyJsPlugin，这个插件webpack已经自带了，可以通过new webpack.optimize.UglifyJsPlugin()获得，配置如下
var path = require('path');
var webpack = require('webpack');
function resolve(_path) {
return path.posix.join(__dirname, _path);
}
module.exports = {
entry: {
main: resolve('src/main.js')
},
output: {
path: resolve('dist'),
filename: 'assets/js/[name].[hash:7].js'
},
module: {
rules: [{
test: /\.js$/,
use: {
loader: 'babel-loader'
},
exclude: /(node_modules|bower_components)/
}, {
test: /\.css$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader'
}, {
loader: 'postcss-loader'
}]
}]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
],
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
"@": resolve('src'),
"@static": resolve('static')
}
}
};
12.css文件提取
我们知道，webpack编译后，css会存放在编译后的js文件里，就有强迫症的人来看这种结构就很奇怪，==extract-text-webpack-plugin==就是这样一个能够把css文件提取出来的插件
1. 下载extract-text-webpack-plugin插件
cnpm install extract-text-webpack-plugin --save-dev- 在plugins配置中放入该插件
- 插件参数：该插件有三个参数意义分别如下：
- use:指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
- fallback:编译后用什么loader来提取css文件
- publicfile:用来覆盖项目路径,生成该css文件的文件路径
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
function resolve(_path) {
return path.posix.join(__dirname, _path);
}
module.exports = {
entry: {
main: resolve('src/main.js')
},
output: {
path: resolve('dist'),
filename: 'assets/js/[name].[hash:7].js'
},
module: {
rules: [{
test: /\.js$/,
use: {
loader: 'babel-loader'
},
exclude: /(node_modules|bower_components)/
}, {
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader'
}, {
loader: 'postcss-loader'
}]
})
}]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin({
filename: path.posix.join('assets', 'css/[name].[contenthash].css')
})
],
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
"@": resolve('src'),
"@static": resolve('static')
}
}
};
13.css压缩，webpack中我们使用optimize-css-assets-webpack-plugin这个插件来做css代码的压缩
- 下载插件
cnpm install optimize-css-assets-webpack-plugin --save-dev- 配置文件如下
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
function resolve(_path) {
return path.posix.join(__dirname, _path);
}
module.exports = {
entry: {
main: resolve('src/main.js')
},
output: {
path: resolve('dist'),
filename: 'assets/js/[name].[hash:7].js'
},
module: {
rules: [{
test: /\.js$/,
use: {
loader: 'babel-loader'
},
exclude: /(node_modules|bower_components)/
}, {
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader'
}, {
loader: 'postcss-loader'
}]
})
}]
},
plugins: [
// js压缩
new webpack.optimize.UglifyJsPlugin(),
// css压缩
new OptimizeCssAssetsPlugin(),
// css分离
new ExtractTextPlugin({
filename: path.posix.join('assets', 'css/[name].[contenthash].css')
})
],
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
"@": resolve('src'),
"@static": resolve('static')
}
}
};
14.js、css文件在html文件中自动引入（编译html）
html-webpack-plugin
这个插件的作用是依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用（比如添加了hash值）。
1. 安装
cnpm install html-webpack-plugin --save-dev这个插件自动完成了我们之前手动做的一些事情，在正式使用之前需要对一直以来的项目结构做一些更改：
将根目录中的index.html作为html模板，编译后，webpack会在dist目录下生成index.html（编译后的html文件），编译后的文件css和js文件都自动引入，无需手动引入
- 配置文件如下
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
function resolve(_path) {
return path.posix.join(__dirname, _path);
}
module.exports = {
entry: {
main: resolve('src/main.js')
},
output: {
path: resolve('dist'),
filename: 'assets/js/[name].[hash:7].js'
},
module: {
rules: [{
test: /\.js$/,
use: {
loader: 'babel-loader'
},
exclude: /(node_modules|bower_components)/
}, {
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader'
}, {
loader: 'postcss-loader'
}]
})
}]
},
plugins: [
// js压缩
new webpack.optimize.UglifyJsPlugin(),
// css压缩
new OptimizeCssAssetsPlugin(),
// css分离
new ExtractTextPlugin({
filename: path.posix.join('assets', 'css/[name].[contenthash].css')
}),
// html 编译
new HtmlWebpackPlugin({
filename: 'index.html', //new 目标编译出的文件的文件名
template: 'index.html', //new 编译后的html的路径，相对目录是dist文件夹
inject: true // 是否把js文件插入到body的最后
})
],
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
"@": resolve('src'),
"@static": resolve('static')
}
}
};
15.webpack配置本地服务器
webpack中我们这里只考虑简单情况，使用简洁的==webpack-dev-server==插件来实现
- 想不想让你的浏览器监听你的代码的修改，并自动刷新显示修改后的结果，其实Webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建，可以实现你想要的这些功能，不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖
- 安装
cnpm install webpack-dev-server --dev- devserver作为webpack配置选项中的一项，以下是它的一些配置选项，更多配置可参考
| devserver的配置选项 | 功能描述 |
|---|---|
| contentBase | 默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public”目录） |
| port | 设置默认监听端口，如果省略，默认为”8080“ |
| inline | 设置为true，当源文件改变时会自动刷新页面 |
| historyApiFallback | 在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html |
- 把这些命令加到webpack的配置文件中，现在的配置文件webpack.config.js如下所示
devServer: {
contentBase: "./", //本地服务器所加载的页面所在的目录
historyApiFallback: true, //不跳转
inline: true //实时刷新
},- 在package.json中的scripts对象中添加如下命令，用以开启本地服务器：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"server": "webpack-dev-server --open"
},- 在终端中输入npm run server即可在本地8080端口查看结果
16.Hot Module Replacement Plugin
- Hot Module Replacement（HMR）也是webpack里很有用的一个插件，它允许你在修改组件代码后，自动刷新实时预览修改后的效果。
在webpack中实现HMR也很简单，只需要做两项配置
- 在webpack配置文件中添加HMR插件；
在Webpack Dev Server中添加“hot”参数；
- 不过配置完这些后，JS模块其实还是不能自动热加载的，还需要在你的JS模块中执行一个Webpack提供的API才能实现热加载，虽然这个API不难使用，但是如果是React模块，使用我们已经熟悉的Babel可以更方便的实现功能热加载。
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
function resolve(_path) {
return path.posix.join(__dirname, _path);
}
module.exports = {
entry: {
main: resolve('src/main.js')
},
output: {
path: resolve('dist'),
filename: 'assets/js/[name].[hash:7].js'
},
devtool: 'eval-source-map', // source-map
devServer: {
contentBase: "./", //本地服务器所加载的页面所在的目录
port: 8888,
inline: true, //实时刷新
historyApiFallback: true, //不跳转
hot: true // 开启热重载
},
module: {
rules: [{
test: /\.js$/,
use: {
loader: 'babel-loader'
},
exclude: /(node_modules|bower_components)/
}, {
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [{
loader: 'css-loader'
}, {
loader: 'postcss-loader'
}]
})
}]
},
plugins: [
// js压缩
new webpack.optimize.UglifyJsPlugin(),
// css压缩
new OptimizeCssAssetsPlugin(),
// css分离
new ExtractTextPlugin({
filename: path.posix.join('assets', 'css/[name].[contenthash].css')
}),
// html 编译
new HtmlWebpackPlugin({
filename: 'index.html', //new 目标编译出的文件的文件名
template: 'index.html', //new 编译后的html的路径，相对目录是dist文件夹
inject: true // 是否把js文件插入到body的最后
}),
//热加载插件
new webpack.HotModuleReplacementPlugin(),
],
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
"@": resolve('src'),
"@static": resolve('static')
}
}
};
17. 生成source-map（使调试更容易）
开发总是离不开调试，方便的调试能极大的提高开发效率，不过有时候通过打包后的文件，你是不容易找到出错了的地方，对应的你写的代码的位置的，Source Maps就是来帮我们解决这个问题的。
通过简单的配置，webpack就可以在打包时为我们生成的source maps，这为我们提供了一种对应编译文件和源文件的方法，使得编译后的代码可读性更高，也更容易调试。
在webpack的配置文件中配置source maps，需要配置devtool，它有以下四种不同的配置选项，各具优缺点，描述如下：
| devtool选项 | 配置结果 |
|---|---|
| source-map | 在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包速度； |
| cheap-module-source-map | 在一个单独的文件中生成一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便； |
| eval-source-map | 使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定不要启用这个选项； |
| cheap-module-eval-source-map | 这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点； |
- 正如上表所述，上述选项由上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的打包速度的后果就是对打包后的文件的的执行有一定影响。
- 对小到中型的项目中，eval-source-map是一个很好的选项，再次强调你只应该开发阶段使用它，我们继续对上文新建的webpack.config.js，进行如下配置:
module.exports = {
...
devtool: 'eval-source-map',
...
}==cheap-module-eval-source-map方法构建速度更快，但是不利于调试，推荐在大型项目考虑时间成本时使用。==
18.webpack定义全局变量（ProvidePlugin）
- 在webpack项目中，难免遇到需要到处引入的文件，比如jquery、lodash，这里我们用ProvidePlugin插件来完成打包时全局变量的定义
// 定义全局变量
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
_: 'lodash'
}),19.url-loader
- 如果我们希望在页面引入图片（包括img的src和background的url）。当我们基于webpack进行开发时，引入图片会遇到一些问题。
- 其中一个就是引用路径的问题。拿background样式用url引入背景图来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。
- 另外，如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy。
- url-loader和file-loader是什么关系呢？简答地说，url-loader封装了file-loader。url-loader不依赖于file-loader，即使用url-loader时，只需要安装url-loader即可，不需要安装file-loader，因为url-loader内置了file-loader。通过上面的介绍，我们可以看到，url-loader工作分两种情况：1.文件大小小于limit参数，url-loader将会把文件转为DataURL；2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。因此我们只需要安装url-loader即可。
20.创建开发环境、生产环境不同的打包入口
- 伴随着webpack配置越来越多，导致webpack.config.js文件越来越臃肿，这个时候就需要创建webpack.base.config.js文件来将公有的一些配置项放在里面，为后面的分支入口做父类
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var webpack = require('webpack');
var config = require('../config');
function resolve(url) {
return path.join(__dirname, '..', url);
}
module.exports = {
entry: {
main: resolve('src/main.js')
},
output: {
path: resolve('dist'),
filename: path.posix.join('assets', 'js/[name].js')
},
module: {
rules: [{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader'
},
}, {
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: 'css-loader'
}, {
loader: 'postcss-loader'
}]
})
}, {
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: 'css-loader'
}, {
loader: 'postcss-loader'
}, {
loader: 'less-loader'
}]
})
}, {
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: 'css-loader'
}, {
loader: 'postcss-loader'
}, {
loader: 'less-loader'
}]
})
}, {
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: path.posix.join('assets', 'img/[name].[hash:7].[ext]')
}
}, {
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: path.posix.join('assets', 'fonts/[name].[hash:7].[ext]')
}
}]
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('src'),
'@static': resolve('static'),
'@cfg': resolve('src/config')
}
}
}
- 创建webpack.dev.config.js作为开发环境打包入口
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var webpack = require('webpack');
var merge = require('webpack-merge');
var config = require('../config');
var webpackBaseConfig = require('./webpack.base.conf');
module.exports = merge(webpackBaseConfig, {
devtool: 'eval-source-map', // source-map
plugins: [
new webpack.DefinePlugin({
'process.env': config.build.env
}),
// 定义全局变量
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
_: 'lodash',
bootbox: 'bootbox'
}),
// 编译html
new HtmlWebpackPlugin({
filename: 'index.html', //new 目标编译出的文件的文件名
template: 'index.html', //new 一个这个插件的实例，并传入相关的参数
inject: true // 是否把js文件插入到body的最后
}),
// extra style.css 引入
new ExtractTextPlugin({
filename: path.posix.join('assets', 'css/[name].[contenthash].css')
}),
//热加载插件
new webpack.HotModuleReplacementPlugin()
]
});
- 创建webpack.prod.config.js作为生产环境打包入口
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var webpack = require('webpack');
var merge = require('webpack-merge');
var config = require('../config');
var webpackBaseConfig = require('./webpack.base.conf.js');
function resolve(url) {
return path.join(__dirname, '..', url);
}
module.exports = merge(webpackBaseConfig, {
output: {
path: resolve('dist'),
filename: path.posix.join('assets', 'js/[name].[hash:7].js')
},
devtool: '#source-map', // source-map
plugins: [
new webpack.DefinePlugin({
'process.env': config.build.env
}),
// 定义全局变量
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
_: 'lodash',
bootbox: 'bootbox'
}),
new CopyWebpackPlugin([{
from: path.resolve(__dirname, '../static'),
to: path.resolve(__dirname, '../dist/static'),
ignore: ['.*']
}]),
// 编译html
new HtmlWebpackPlugin({
filename: 'index.html', //new 目标编译出的文件的文件名
template: 'index.html', //new 一个这个插件的实例，并传入相关的参数
inject: true // 是否把js文件插入到body的最后
}),
// css压缩
new OptimizeCssAssetsPlugin(),
// js压缩
new webpack.optimize.UglifyJsPlugin(),
// extra style.css 引入
new ExtractTextPlugin({
filename: path.posix.join('assets', 'css/[name].[contenthash].css')
}),
new webpack.BannerPlugin('版权所有，翻版必究'),
]
})
- 配置package.json文件，配置快捷启动命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.prod.config.js",
"dev": "webpack-dev-server --open --inline --config build/webpack.dev.conf.js"
},- 生产环境中，每次打包结束后，都会生成一个新的文件，这样会在服务器中产生很多垃圾的文件，正确的处理方法应该是每次打包的时候，先删除dist文件夹下所有的文件，然后再开始打包，所以为了打包，创建了一个build.js脚本，专门做相关流程优化操作
process.env.NODE_DEV = 'production';
var rm = require('rimraf');
var ora = require('ora');
var chalk = require('chalk');
var path = require('path');
var webpack = require('webpack');
var webpackProdConfig = require('./webpack.prod.conf.js');
var spinner = ora('building...')
spinner.start()
rm(path.join(__dirname, '../dist'), error => {
if (error) throw error;
webpack(webpackProdConfig, (err, stats) => {
if (err) throw err;
spinner.stop();
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n\n');
console.log(chalk.cyan(' Build complete.\n'))
console.log(chalk.cyan(' ##### Build code:' + process.env.ROUTERSOFT_BUILDCODE + '\n'))
});
});