一.介绍
webpack.config.js是webpack的配置文件
作用:指示webpack干那些活(当你运行webpack指令时,会加载里面的配置)
所有构建工具都是基于node.js平台运行的~模块化默认采用commonjs
webpack.config.js文件中，主要包括
entry:入口文件
output:出口文件
module:模块
plugins:插件
二.配置webpack
现在开始配置webpack，目标是把这两个js文件合并成一个文件. 我们可以自己在build文件夹里面手动建一个index.html文件夹，然后再把合并以后的js引用在里面，但是这样有些麻烦，所以我们这里安装一个plugin，可以自动快速的帮我们生成HTML。
npm install html-webpack-plugin --save-dev
好 有了这个插件 开始写config文件
//resolve 用来拼接绝对路径的方法const {resolve} = require('path')const HtmlwebpackPlugin = require('html-webpack-plugin');module.exports = {//webpack配置//入口起点entry: './src/index.js',//输出output: {//输出文件名filename: 'built.js',//输出路径//__dirname nodejs的变量,代表当前文件的目录绝对路径path: resolve(__dirname, 'build')},//plugins的配置plugins: [new HtmlwebpackPlugin({title: 'Hello World app'})],//模式mode: 'development', //生产环境// mode:'production,'//开发环境}
src/index.js代码如下:
function add(x,y) {return x + y;}console.log(add(1,2));
然后在项目根目录运行
webpack
终端显示一堆信息，然后告诉你成功了。
你会发现多出来一个build文件夹，里面成功生成了html,点开html,控制台里面会有一个console.log的值:3.
三.使用webpack打包各种资源(loader)
通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss、less为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件
Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置，Loaders的配置包括以下几方面：
test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）loader：loader的名称（必须）include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；query：为loaders提供额外的设置选项（可选）
const {resolve} = require('path');const HtmlWebackPlugin = require('html-webpack-plugin');module.exports = {entry:'./src/index.js',output:{filename:'built.js',path:resolve(__dirname,'build'),//如果不是服务器打开的话,需要配置publicPath来引用文件// publicPath:'./'},module:{rules:[{//打包less资源test:/\.less$/,//使用多个loader处理用useuse:['style-loader','css-loader','less-loader']},{//打包css资源test: /\.css$/,use: ['style-loader','css-loader',]},{//处理图片资源test:/\.(jpg|png|gif)$/,//使用一个loader//下载url-loaderloader:'url-loader',options:{//图片大小小于8kb,就会被base64处理//优点:减少请求数量(减轻服务器压力)//缺点:图片体积会更大(文件请求速度更慢)limit:8*1024,//因为url-loader没人使用ES6模块化解析，二html-loader引入图片是CommonJs//解析时会出问题：【object Module】//解决这个问题就需要关闭url-loader的ES6模块化，使用CommonJs解析//如果写在这里没有解决问题,那么就把esModule:false写到下面处理html文件的options中esModule: false,//[hash:10]取图片的hash的前5位//[ext]取文件原来扩展名name:'[hash:5].[ext]',}},{test: /\.html$/,//处理html文件的img图片(负责引入img,从而能被url-loader进行处理)loader: 'html-loader',},{//排除css|js|html资源exclude: /\.(css|js|html)$/,loader: 'file-loader',options: {name: '[hash:10].[ext]'}}]},plugins:[new HtmlWebackPlugin({template:'./src/index.html'})],mode: 'development',}
看loaders的书写方式，test里面包含一个正则，包含需要匹配的文件，use是一个数组，包含要处理这些程序的loaders，use数组中loader执行顺序:从右到左,从下到上,依次进行
根据你所需要打包的资源,下载所对应的loader插件
例如:我需要打包样式资源,那么就需要下载
css-loader和style-loader
npm install css-loader style-loader --save-dev
或者
npm install css-loader style-loader -D
四.配置webpack-dev-server
上面任务虽然完成了，但是我们要不断运行程序然后查看页面，所以最好新建一个开发服务器，可以serve我们打包以后的代码，并且当代码更新的时候自动刷新浏览器。
安装webpack-dev-server
npm install webpack-dev-server --save-dev
安装完毕后 在webpack.config.js中添加配置
module.exports = {....devServer:{contentBase:resolve(__dirname,'build'),//启动gzip压缩compress:true,//端口号port:3000,open:true}...}
开发服务器devServer:用来自动化(自动编译,自动打开浏览器,自动刷新浏览器~~)特点:只会在内存中编译打包,不会有任何输出启动devServer指令为:webpack serve
