参考连接https://segmentfault.com/a/1190000006178770
一.环境
1.node.js v8.4.0
2.新建项目及文件夹结构
webpack-hello3
app //项目程序文件夹
images //图片文件夹
index.tmpl.html //项目启动界面模板，依据该模板生成正真的项目启动页面index.html
main.js //项目的唯一入口程序，也是启动程序
build //存放编译（打包）后的文件夹
3. npm init //在改文件夹下运行 (生成一个包管理文件package.json)
4. npm install --save-dev webpack //安装webpack
5.package.json文件中配置命令
{
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "webpack", //运行打包 （npm start 或 npm run start ）
"server": "webpack-dev-server --open" //运行本地服务 （npm run server ，在浏览器中运行项目）
},
}
npm的start命令是一个特殊的脚本名称，其特殊性表现在，在命令行中使用npm start就可以执行其对于的命令，如果对应的此脚本名称不是start，想要在命令行中运行时，需要这样用npm run {script name}如npm run build
其中 打包和编译的区别，打包是安装打包配置把js进行打包输出，编译是安装编译配置把ts等代码文件编译成.js文件，或对代码进行压缩，优化等。
二.配置文件及运行本地服务
1.在webpack-hello3文件夹根目录下新建webpack.config.js文件
2.编辑配置文件
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/build",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
},
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
},
}
关于打包成多个js文件的配置
/* * 这样配置所有的js文件都会打包在一个bundle.js文件中 * 此时 index.html引用 * <script src="bundle.js"></script> entry:__dirname+"/app/main.js", //程序唯一入口文件, output:{ path:__dirname+"/public",//打包后文件存放的地方 filename:"bundle.js"//打包后输出文件的文件名 }, */ /* * 要把各js文件分多个文件打包时，需要这样配置 * 此时 index.html引用 * <script src="main.js"></script> * <script src="gr.js"></script> */ entry:{ main:__dirname+"/app/main.js", //main 表示程序唯一入口文件 gr:[__dirname+"/app/Greeter.js"] //这个可以把多个js文件合并成一个gr.js }, output:{ path:__dirname+"/public",//打包后文件存放的地方 filename:"[name].js" //这样会分别生成main.js和 gr.js 两个文件 },
三.Babel
Babel其实是一个编译JavaScript的平台，它可以编译代码帮你达到以下目的：
- 让你能使用最新的JavaScript代码（ES6，ES7...），而不用管新标准是否被当前使用的浏览器完全支持(如 import {} from './main.js') ；
- 让你能使用基于JavaScript进行了拓展的语言，比如React的JSX；
// npm一次性安装多个依赖模块，模块之间用空格隔开 ,//babel-core babel核心包，babel-preset-env 解析Es6,babel-preset-react解析React的JSX
1.安装babel
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
2.配置babel
{
test: /(.jsx|.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env", "react"
]
}
},
exclude: /node_modules/
},
四.安装react
npm install --save react react-dom
五.css
css-loader使你能够使用类似@import和 url(...)的方法实现 require()的功能style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。1.安装
npm install --save-dev style-loader css-loader
2.配置
{
test: /.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true
}
}
]
}
六.图片
引用形式1.html文件中直接引用，如：<img src="a.jpg" />
2.css中，如：.body{background:url(a.jpg)}
3.js中，如：var img = '<img src="a.jpg" />'; document.body.innerHTML = img;
4.ReactJS中，如：render(){
return (<img src="a.jpg" />);
}
webpack中引入图片需要url-loader 这个加载器，而url-loader又依赖file-loader,
而html中的img标签需要html-withimg-loader插件支持，所以需要安装它们,
npm install --save-dev file-loader url-loader html-withimg-loader
增加配置
{
test:/.(png|jpg|gif)$/,
use:{
loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
/*
loader:"url-loader",
options:{
limit:50,//图片打包限制，当图片小于50字节时自动转换成base64编码引用，大于50字节时打包
outputPath:'images/' //将打包后图片放到指定文件夹
}*/
}
},
{
test:/.html$/, //解析直接写在html文件中<img>标签
use:{
loader:'html-withimg-loader'
}
}
七.简单优化
1.分离第三方库，如react
2.分离js,css(既css单独打包，因为webpack默认会把js,css打包到一个文件)
3.压缩js代码
安装css单独打包插件
npm -save-dev extract-text-webpack-plugin
更改css配置
{
test: /.css$/,
use:ExtractTextPlugin.extract({
fallback: "style-loader",
use: {
loader:"css-loader",
options:{
modules:true,//指定启用css modules
localIdentName:'[name]__[local]--[hash:base64:5]' //指定css类名格式
}
}
})
},
plugins:[
//分离第三方库，要放在前面
new webpack.optimize.CommonsChunkPlugin({name:"vendor",filename:"vendor.bundle.js"}),
new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数
}),
new webpack.optimize.OccurrenceOrderPlugin(),//根据模块调用次数，给模块分配ids，常被调用的ids分配更短的id，使得ids可预测，降低文件大小，该模块推荐使用
new webpack.optimize.UglifyJsPlugin(),//压缩js
new ExtractTextPlugin("style.css")//分离css
]