webpack入门

最近开始学习webpack的正确打开姿势，先总结一下webpack一些比较重要的入门配置，在博客的最后会有完整的webpack.config.js的栗子。

1.什么是webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用

2.工作方式
把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件

3.使用准备
进入项目根目录

npm initnpm install webpack --save-dev [--no-optional]

*最新版本npm需要添加–no-optional选项，我当前npm版本是5.3.0
*–save-dev意思是把模块装到当前项目中，init初始化后在
项目根目录会有node_modules文件夹，模块就装到这个文件夹中
4.使用webpack

webpack {entry file} {destination for bundled file}

*{extry file}填写入口文件的路径
*{destination for bundled file}填写打包文件的存放路径
*填写路径的时候不用添加{}

5.通过配置文件使用webpack
在项目根目录下新建webpack.config.js
webpack.config.js文件内容：

module.exports = {  entry:  __dirname + "/app/main.js",//唯一入口文件  output: {    path: __dirname + "/public",//打包后的文件存放的地方    filename: "bundle.js"//打包后输出文件的文件名  }}

在终端执行webpack

entry的几种写法

1.entry:"url"2.entry:["url","url",....]3.entry:{    namea:"url",    nameb:"url",    ......   }

output多输出

output:{    filename:"[name].js"/"[hash].js"/"[chunkhash].js",    path:"..."}

output将js、index.html生成到不同路径

output:{    path:"./dist",    filename:"js/[name].js"}

//index.html生成到dist目录，js生成到dist/js目录下

output publicPath参数

output:{    path:"./dist",    filename:"js/[name].js",    publicPath:"http://cdn.com/"}

//html中引用js的路径变为http://cdn.com/js/[name].js

6.更快捷的执行打包
npm引导任务执行
修改package.json中的script

"scripts": {    "start":"webpack"}

在终端输入npm start即可

*package.js 是npm的配置文件，webpack.config.js 是webpack的配置文件

7.生成source maps
在配置文件webpack.config.js中配置devtool，有四种不同的选项

8.使用webpack构建本地服务器
功能：浏览器监听代码修改，并自动刷新显示修改后的结果
安装为项目依赖：npm install –save-dev webpack-dev-server

添加以上设置到webpack配置文件
在npm配置文件中的script对象中添加：

"scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "start": "webpack",    "server": "webpack-dev-server --open"  }

在终端输入npm run server即可在本地的8080端口查看结果
*这里我发现如果在win10下ctrl+c退出其实服务器尚未关闭，再次运行服务器会发现端口改变（未指定端口）或者报错（指定端口），访问原端口依然可以看见项目

9.html-webpack-plugin的使用
先通过npm安装

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

再在webpack.config.js中引入该插件

var htmlWebpackPlugin=require("html-webpack-plugin");

在module.exports中配置plugins选项

plugins:[    new htmlWebpackPlugin({      template:"index.html",//参照的模板html      filename:"index.html",//生成html文件名称      inject:"body"//js文件插入到head还是body    })  ]

传递参数

plugins:[    new htmlWebpackPlugin({      template:"index.html",//参照的模板html      filename:"index.html",//生成html文件名称      inject:"body",//js文件插入到head还是body      title:"plugins中设置的title",      date:new Date()    })  ]

在模板html中，通过<%= htmlWebpackPlugin.options.title %>的形式获取参数

如果需要把不同js插入到html的不同位置
inject设为false
在对应位置插入script标签，src写为<%= htmlWebpackPlugin.files.chunks.js_name.entry %>

压缩html文件
在plugins中配置minify，具体配置参照https://www.npmjs.com/package/html-webpack-plugin

处理多页面应用

entry:{    main:"./app/main.js",    a:"./app/a.js",    b:"./app/b.js",    c:"./app/c.js"}

plugins:[    new htmlWebpackPlugin({      template:"index.html",//参照的模板html      filename:"index.html",//生成html文件名称      inject:"body",//js文件插入到head还是body      title:"plugins中设置的title",      date:new Date(),      chunks:["main","a"]      //指定该html需要引入的chunk，值为数组，可以使用excludeChunks排除不需要的chunk    }),    new htmlWebpackPlugin({      template:"index.html",      filename:"b.html",      inject:"body",      title:"this is b.html",      date:new Date(),      chunks:["b"]    }),    new htmlWebpackPlugin({      template:"index.html",      filename:"c.html",      inject:"body",      title:"this is c.html",      date:new Date(),      chunks:["c"]    })  ]

webpack.config.js实例

var htmlWebpackPlugin=require("html-webpack-plugin");module.exports={  devtool:"eval-source-map",  entry:{    main:"./app/main.js",    a:"./app/a.js",    b:"./app/b.js",    c:"./app/c.js"  },//已多次提及的唯一入口文件  output:{    path:__dirname+"/public",//打包后的文件存放的地方    filename:"js/[name].js"//打包后输出文件的文件名  },  devServer:{    contentBase: "./public",//本地服务器所加载的页面所在的目录    historyApiFallback: true,//不跳转    inline: true,//实时刷新    port:8080  },  module:{    rules:[      // {test:/\.css$/,use:['style-loader','css-loader']}    ]  },  plugins:[    new htmlWebpackPlugin({      template:"index.html",//参照的模板html      filename:"index.html",//生成html文件名称      inject:"body",//js文件插入到head还是body      title:"plugins中设置的title",      date:new Date(),      chunks:["main","a"]      //指定该html需要引入的chunk，值为数组，可以使用excludeChunks排除不需要的chunk    }),    new htmlWebpackPlugin({      template:"index.html",      filename:"b.html",      inject:"body",      title:"this is b.html",      date:new Date(),      chunks:["b"]    }),    new htmlWebpackPlugin({      template:"index.html",      filename:"c.html",      inject:"body",      title:"this is c.html",      date:new Date(),      chunks:["c"]    })  ]}