webpack 前端工程自动化工具 当前版本3.10
安装 npm install -g webpack
npm install webpack --save-dev || cnpm install webpack --save-dev
1. 基本打包 命令 webpack
webpack src/entry.js dist/bundle.js
2.入口和出口
//ES6输出 dist 绝对路径 const path = require('path'); console.log(path.resolve(__dirname,'dist'));
配置多入口&多出口
const path = require('path');
// path.resolve(__dirname,'dist') 打印dist的绝对路径
module.exports={
// 入口文件位置
entry:{
entry:'./src/entry.js',
entry2:'./src/entry2.js'
},
// 出口文件位置
output:{
path:path.resolve(__dirname,'dist'),
//name意思 是根据入口文件 打包的名称 打包出对应数量的 出口文件
filename:'[name].js'
},
// 模块:例如 图片CSS less sass typescript 转化压缩
module:{},
// 插件,用于生产模块和各项功能
plugins:[],
// 配置webpack开发服务功能
devServer:{}
}
3.热更新
cnpm install webpack-dev-server --save-dev 安装webpack-dev-server
修改 package.json
"scripts": {
"server": "webpack-dev-server"
}
const path = require('path');
// path.resolve(__dirname,'dist') 打印dist的绝对路径
module.exports={
// 入口文件位置
entry:{
entry:'./src/entry.js',
entry2:'./src/entry2.js'
},
// 出口文件位置
output:{
path:path.resolve(__dirname,'dist'),
//name意思 是根据入口文件 打包的名称 打包出对应数量的 出口文件
filename:'[name].js'
},
// 模块:例如 图片CSS less sass typescript 转化压缩
module:{},
// 插件,用于生产模块和各项功能
plugins:[],
// 配置webpack开发服务功能
devServer:{
// 设置基本目录结构
contentBase:path.resolve(__dirname,'dist'),
// 服务器的IP地址,可使用IP也可以用localhost
host:'localhost',
// 服务器压压缩是否开启
compress:true,
// 配置服务端口号
port:1717
}
}
npm run server 启动后， 它有一种监控机制（也叫watch）。它可以监控到我们修改源码,并且立即在浏览器里给我们更新
4.模块:css文件打包
webpack在生产环境中有一个重要的作用就是减少http的请求数，就是把多个文件打包到一个js里,这样请求数就可以减少好多
Loaders 是webpack最重要的功能之一，他也是webpack如此盛行的原因，通过使用不通过的loader，webpack可以对不同的文件进行特定的处理
例如把 sass 转成 css ， ES67 转换成ES5 把REACT JSX转换成javascript代码
css打包 需要 安装两个包
npm install --save-dev style-loader
npm install --save-dev css-loader
//ES6输出 dist 绝对路径 const path = require('path'); // path.resolve(__dirname,'dist') 打印dist的绝对路径 module.exports={ // 入口文件位置 entry:{ entry:'./src/entry.js', entry2:'./src/entry2.js' }, // 出口文件位置 output:{ path:path.resolve(__dirname,'dist'), //name意思 是根据入口文件 打包的名称 打包出对应数量的 出口文件 filename:'[name].js' }, // 模块:例如 图片CSS less sass typescript 转化压缩 module:{ rules:[ { test:/.css$/, use:['style-loader','css-loader'] } ] }, // 插件,用于生产模块和各项功能 plugins:[], // 配置webpack开发服务功能 devServer:{ // 设置基本目录结构 contentBase:path.resolve(__dirname,'dist'), // 服务器的IP地址,可使用IP也可以用localhost host:'localhost', // 服务器压压缩是否开启 compress:true, // 配置服务端口号 port:1717 } }
5.插件配置 js压缩
上线前JS需要压缩 webpack集成了一个压缩插件 uglifyjs-webpack-pligin 不需要 再次安装
引入const uglify = require('uglifyjs-webpack-plugin')
配置在 plugins:[ new uglify() ] 就可以了
//ES6输出 dist 绝对路径 const path = require('path'); // path.resolve(__dirname,'dist') 打印dist的绝对路径 //引入uglify const uglify = require('uglifyjs-webpack-plugin'); module.exports={ // 入口文件位置 entry:{ entry:'./src/entry.js', entry2:'./src/entry2.js' }, // 出口文件位置 output:{ path:path.resolve(__dirname,'dist'), //name意思 是根据入口文件 打包的名称 打包出对应数量的 出口文件 filename:'[name].js' }, // 模块:例如 图片CSS less sass typescript 转化压缩 module:{ rules:[ { test:/.css$/, use:['style-loader','css-loader'] } ] }, // 插件,用于生产模块和各项功能 plugins:[ // 配置uglify new uglify() ], // 配置webpack开发服务功能 devServer:{ // 设置基本目录结构 contentBase:path.resolve(__dirname,'dist'), // 服务器的IP地址,可使用IP也可以用localhost host:'localhost', // 服务器压压缩是否开启 compress:true, // 配置服务端口号 port:1717 } }
6.HTML文件的打包
将src下的index.html打包到dist下 区分生产环境和开发环境
需要引入 html-webpack-plugin
const htmlPlugin = require('html-webpack-plugin')
配置在plugins里
new htmlPlugin(
minify:{
removeAttributeQuotes:true
},hash:true,
template:'./src/index.html'
)
//ES6输出 dist 绝对路径 const path = require('path'); // path.resolve(__dirname,'dist') 打印dist的绝对路径 //引入uglify const uglify = require('uglifyjs-webpack-plugin'); // 引入 html-webpack-plugin const htmlPlugin = require('html-webpack-plugin'); module.exports={ // 入口文件位置 entry:{ entry:'./src/entry.js', entry2:'./src/entry2.js' }, // 出口文件位置 output:{ path:path.resolve(__dirname,'dist'), //name意思 是根据入口文件 打包的名称 打包出对应数量的 出口文件 filename:'[name].js' }, // 模块:例如 图片CSS less sass typescript 转化压缩 module:{ rules:[ { test:/.css$/, use:['style-loader','css-loader'] } ] }, // 插件,用于生产模块和各项功能 plugins:[ // 配置uglify // new uglify(), new htmlPlugin({ // 对html文件进行压缩 minify:{ // 去掉属性的双引号 removeAttributeQuotes:true }, // 让开发中js有缓存效果,所以加入hash,这样可以有效避免缓存js hash:true, // 是要打包的html模板路径和文件名称 template:'./src/index.html' }) ], // 配置webpack开发服务功能 devServer:{ // 设置基本目录结构 contentBase:path.resolve(__dirname,'dist'), // 服务器的IP地址,可使用IP也可以用localhost host:'localhost', // 服务器压压缩是否开启 compress:true, // 配置服务端口号 port:1717 } }
7. css中的图片处理
webpack 打包图片需要 file-loader&url-loader
npm install --save-dev file-loader url-loader
file-loader
解决引用路径的问题，拿background样式引入背景图片来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式的Url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的，这就会导致图片引入失败，这个问题是用file-loader解决的，file-loader可以解析目录中的url引入(不仅限于css)根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后的文件引入路径，使之指向正确的文件
url-loader
如果图片较多，会发很多http请求，会价格低页面性能，这个问题可以通过url-loader解决.url-loader会将引入的图片编码，生成dataUrl，相当于把图片数据翻译成一串字符打包到文件中,最终只需要引入这个文件就能访问图片了，当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数,小于limit字节的文件会被转为DataURL,大于limit的还会使用file-loader进行copy
{
// 匹配图片文件后缀名称
test:/.(png|jpg|gif)/,
// 是指定使用的loader和loader的配置参数
use:[{
loader:'url-loader',
options:{
// 小于500000的文件打包成base64的格式写入js
limit:500
}
}]
}
//ES6输出 dist 绝对路径 const path = require('path'); // path.resolve(__dirname,'dist') 打印dist的绝对路径 //引入uglify const uglify = require('uglifyjs-webpack-plugin'); // 引入 html-webpack-plugin const htmlPlugin = require('html-webpack-plugin'); module.exports={ // 入口文件位置 entry:{ entry:'./src/entry.js', entry2:'./src/entry2.js' }, // 出口文件位置 output:{ path:path.resolve(__dirname,'dist'), //name意思 是根据入口文件 打包的名称 打包出对应数量的 出口文件 filename:'[name].js' }, // 模块:例如 图片CSS less sass typescript 转化压缩 module:{ rules:[ { test:/.css$/, use:['style-loader','css-loader'] },{ // 匹配图片文件后缀名称 test:/.(png|jpg|gif)/, // 是指定使用的loader和loader的配置参数 use:[{ loader:'url-loader', options:{ // 小于500000的文件打包成base64的格式写入js limit:500 } }] } ] }, // 插件,用于生产模块和各项功能 plugins:[ // 配置uglify // new uglify(), new htmlPlugin({ // 对html文件进行压缩 minify:{ // 去掉属性的双引号 removeAttributeQuotes:true }, // 让开发中js有缓存效果,所以加入hash,这样可以有效避免缓存js hash:true, // 是要打包的html模板路径和文件名称 template:'./src/index.html' }) ], // 配置webpack开发服务功能 devServer:{ // 设置基本目录结构 contentBase:path.resolve(__dirname,'dist'), // 服务器的IP地址,可使用IP也可以用localhost host:'localhost', // 服务器压压缩是否开启 compress:true, // 配置服务端口号 port:1717 } }
8.图片迈坑:css分离和图片路径处理
Extract Text Plugin
npm install --save-dev extract-text-webpack-plugin 安装
const extractTextPlugin = require('extract-text-webpack-plugin') 引入
new extractTextPlugin('/css/index.css') 配置再 plugin
publicPath：是在webpack.config.js文件的output选项中，主要作用就是处理静态文件路径的。
var website ={
publicPath:"http://192.168.1.108:1717/"
}
修改 module:{
rules: [
{
test: /.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},{
test:/.(png|jpg|gif)/ ,
use:[{
loader:'url-loader',
options:{
limit:500000
}
}]
}
]
},
//ES6输出 dist 绝对路径 const path = require('path'); // path.resolve(__dirname,'dist') 打印dist的绝对路径 //引入uglify const uglify = require('uglifyjs-webpack-plugin'); // 引入 html-webpack-plugin const htmlPlugin = require('html-webpack-plugin'); // 引入 extract-text-webpack-pluguin const extractTextPlugin = require("extract-text-webpack-plugin"); var website ={ publicPath:"http://192.168.1.9:1717/" } module.exports={ // 入口文件位置 entry:{ entry:'./src/entry.js', entry2:'./src/entry2.js' }, // 出口文件位置 output:{ path:path.resolve(__dirname,'dist'), //name意思 是根据入口文件 打包的名称 打包出对应数量的 出口文件 filename:'[name].js', publicPath:website.publicPath }, // 模块:例如 图片CSS less sass typescript 转化压缩 module:{ rules:[ { test: /.css$/, use: extractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) },{ // 匹配图片文件后缀名称 test:/.(png|jpg|gif)/, // 是指定使用的loader和loader的配置参数 use:[{ loader:'url-loader', options:{ // 小于500000的文件打包成base64的格式写入js limit:500 } }] } ] }, // 插件,用于生产模块和各项功能 plugins:[ // 配置uglify // new uglify(), new htmlPlugin({ // 对html文件进行压缩 minify:{ // 去掉属性的双引号 removeAttributeQuotes:true }, // 让开发中js有缓存效果,所以加入hash,这样可以有效避免缓存js hash:true, // 是要打包的html模板路径和文件名称 template:'./src/index.html' }),new extractTextPlugin('/css/index.css') ], // 配置webpack开发服务功能 devServer:{ // 设置基本目录结构 contentBase:path.resolve(__dirname,'dist'), // 服务器的IP地址,可使用IP也可以用localhost host:'192.168.1.9', // 服务器压压缩是否开启 compress:true, // 配置服务端口号 port:1717 } }
9.处理HTML中的图片
只有项目安装webpack，如何打包？
"scripts": {
"server": "webpack-dev-server --open",
"build":"webpack"
},
html-withimg-loader
npm install html-withimg-loader --save-dev
{
test: /.(htm|html)$/i,
use:[ 'html-withimg-loader']
}
//ES6输出 dist 绝对路径 const path = require('path'); // path.resolve(__dirname,'dist') 打印dist的绝对路径 //引入uglify const uglify = require('uglifyjs-webpack-plugin'); // 引入 html-webpack-plugin const htmlPlugin = require('html-webpack-plugin'); // 引入 extract-text-webpack-pluguin const extractTextPlugin = require("extract-text-webpack-plugin"); var website ={ publicPath:"http://192.168.1.9:1717/" } module.exports={ // 入口文件位置 entry:{ entry:'./src/entry.js', entry2:'./src/entry2.js' }, // 出口文件位置 output:{ path:path.resolve(__dirname,'dist'), //name意思 是根据入口文件 打包的名称 打包出对应数量的 出口文件 filename:'[name].js', publicPath:website.publicPath }, // 模块:例如 图片CSS less sass typescript 转化压缩 module:{ rules:[ { test: /.css$/, use: extractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) },{ // 匹配图片文件后缀名称 test:/.(png|jpg|gif)/, // 是指定使用的loader和loader的配置参数 use:[{ loader:'url-loader', options:{ // 小于500000的文件打包成base64的格式写入js limit:500, outputPath:'images/' } }] }, { test: /.(htm|html)$/i, use:['html-withimg-loader'] } ] }, // 插件,用于生产模块和各项功能 plugins:[ // 配置uglify // new uglify(), new htmlPlugin({ // 对html文件进行压缩 minify:{ // 去掉属性的双引号 removeAttributeQuotes:true }, // 让开发中js有缓存效果,所以加入hash,这样可以有效避免缓存js hash:true, // 是要打包的html模板路径和文件名称 template:'./src/index.html' }),new extractTextPlugin('css/index.css') ], // 配置webpack开发服务功能 devServer:{ // 设置基本目录结构 contentBase:path.resolve(__dirname,'dist'), // 服务器的IP地址,可使用IP也可以用localhost host:'192.168.1.9', // 服务器压压缩是否开启 compress:true, // 配置服务端口号 port:1717 } }
10.less 打包分离
npm install --save-dev less
npm install --save-dev less-loader
//非css分离写法 { test: /.less$/, use: [{ loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS , { loader: "less-loader" // compiles Less to CSS }] }
// less 分离写法 { test: /.less$/, use: extractTextPlugin.extract({ use: [{ loader: "css-loader" }, { loader: "less-loader" }], // use style-loader in development fallback: "style-loader" }) }
//ES6输出 dist 绝对路径 const path = require('path'); // path.resolve(__dirname,'dist') 打印dist的绝对路径 //引入uglify const uglify = require('uglifyjs-webpack-plugin'); // 引入 html-webpack-plugin const htmlPlugin = require('html-webpack-plugin'); // 引入 extract-text-webpack-pluguin const extractTextPlugin = require("extract-text-webpack-plugin"); var website ={ publicPath:"http://192.168.1.9:1717/" } module.exports={ // 入口文件位置 entry:{ entry:'./src/entry.js', entry2:'./src/entry2.js' }, // 出口文件位置 output:{ path:path.resolve(__dirname,'dist'), //name意思 是根据入口文件 打包的名称 打包出对应数量的 出口文件 filename:'[name].js', publicPath:website.publicPath }, // 模块:例如 图片CSS less sass typescript 转化压缩 module:{ rules:[ { test: /.css$/, use: extractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) },{ // 匹配图片文件后缀名称 test:/.(png|jpg|gif)/, // 是指定使用的loader和loader的配置参数 use:[{ loader:'url-loader', options:{ // 小于500000的文件打包成base64的格式写入js limit:500, outputPath:'images/' } }] }, { test: /.(htm|html)$/i, use:['html-withimg-loader'] },{ test: /.less$/, use: extractTextPlugin.extract({ use: [{ loader: "css-loader" }, { loader: "less-loader" }], // use style-loader in development fallback: "style-loader" }) } ] }, // 插件,用于生产模块和各项功能 plugins:[ // 配置uglify // new uglify(), new htmlPlugin({ // 对html文件进行压缩 minify:{ // 去掉属性的双引号 removeAttributeQuotes:true }, // 让开发中js有缓存效果,所以加入hash,这样可以有效避免缓存js hash:true, // 是要打包的html模板路径和文件名称 template:'./src/index.html' }),new extractTextPlugin('css/index.css') ], // 配置webpack开发服务功能 devServer:{ // 设置基本目录结构 contentBase:path.resolve(__dirname,'dist'), // 服务器的IP地址,可使用IP也可以用localhost host:'192.168.1.9', // 服务器压压缩是否开启 compress:true, // 配置服务端口号 port:1717 } }
11.sass打包分离
先装node-sass 后装 sass-loader
后者依赖前者安装
npm install --save-dev node-sass
npm install --save-dev sass-loader
//css不拆分写法 { test: /.scss$/, use: [{ loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS }, { loader: "sass-loader" // compiles Sass to CSS }] }
// css拆分写法 { test: /.scss$/, use: extractTextPlugin.extract({ use: [{ loader: "css-loader" }, { loader: "sass-loader" }], // use style-loader in development fallback: "style-loader" }) }
//ES6输出 dist 绝对路径 const path = require('path'); // path.resolve(__dirname,'dist') 打印dist的绝对路径 //引入uglify const uglify = require('uglifyjs-webpack-plugin'); // 引入 html-webpack-plugin const htmlPlugin = require('html-webpack-plugin'); // 引入 extract-text-webpack-pluguin const extractTextPlugin = require("extract-text-webpack-plugin"); var website ={ publicPath:"http://192.168.1.9:1717/" } module.exports={ // 入口文件位置 entry:{ entry:'./src/entry.js', entry2:'./src/entry2.js' }, // 出口文件位置 output:{ path:path.resolve(__dirname,'dist'), //name意思 是根据入口文件 打包的名称 打包出对应数量的 出口文件 filename:'[name].js', publicPath:website.publicPath }, // 模块:例如 图片CSS less sass typescript 转化压缩 module:{ rules:[ { test: /.css$/, use: extractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) },{ // 匹配图片文件后缀名称 test:/.(png|jpg|gif)/, // 是指定使用的loader和loader的配置参数 use:[{ loader:'url-loader', options:{ // 小于500000的文件打包成base64的格式写入js limit:500, outputPath:'images/' } }] }, { test: /.(htm|html)$/i, use:['html-withimg-loader'] },{ test: /.less$/, use: extractTextPlugin.extract({ use: [{ loader: "css-loader" }, { loader: "less-loader" }], // use style-loader in development fallback: "style-loader" }) }, { test: /.scss$/, use: extractTextPlugin.extract({ use: [{ loader: "css-loader" }, { loader: "sass-loader" }], // use style-loader in development fallback: "style-loader" }) } ] }, // 插件,用于生产模块和各项功能 plugins:[ // 配置uglify // new uglify(), new htmlPlugin({ // 对html文件进行压缩 minify:{ // 去掉属性的双引号 removeAttributeQuotes:true }, // 让开发中js有缓存效果,所以加入hash,这样可以有效避免缓存js hash:true, // 是要打包的html模板路径和文件名称 template:'./src/index.html' }),new extractTextPlugin('css/index.css') ], // 配置webpack开发服务功能 devServer:{ // 设置基本目录结构 contentBase:path.resolve(__dirname,'dist'), // 服务器的IP地址,可使用IP也可以用localhost host:'192.168.1.9', // 服务器压压缩是否开启 compress:true, // 配置服务端口号 port:1717 } }
12.postCss
npm install --save-dev postcss-loader autoprefixer
同级下建立
#test{
100px;
height: 100px;
background: rebeccapurple;
transform: rotate(45deg);
}
//建立postcss.config.js 文件 配置如下
module.exports={ plugins:[ require('autoprefixer') ] }
{ test: /.css$/, use: extractTextPlugin.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader' ] }) }
//ES6输出 dist 绝对路径 const path = require('path'); // path.resolve(__dirname,'dist') 打印dist的绝对路径 //引入uglify const uglify = require('uglifyjs-webpack-plugin'); // 引入 html-webpack-plugin const htmlPlugin = require('html-webpack-plugin'); // 引入 extract-text-webpack-pluguin const extractTextPlugin = require("extract-text-webpack-plugin"); var website ={ publicPath:"http://192.168.1.9:1717/" } module.exports={ // 入口文件位置 entry:{ entry:'./src/entry.js', entry2:'./src/entry2.js' }, // 出口文件位置 output:{ path:path.resolve(__dirname,'dist'), //name意思 是根据入口文件 打包的名称 打包出对应数量的 出口文件 filename:'[name].js', publicPath:website.publicPath }, // 模块:例如 图片CSS less sass typescript 转化压缩 module:{ rules:[ { test: /.css$/, use: extractTextPlugin.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader' ] }) } , { // 匹配图片文件后缀名称 test:/.(png|jpg|gif)/, // 是指定使用的loader和loader的配置参数 use:[{ loader:'url-loader', options:{ // 小于500000的文件打包成base64的格式写入js limit:500, outputPath:'images/' } }] }, { test: /.(htm|html)$/i, use:['html-withimg-loader'] },{ test: /.less$/, use: extractTextPlugin.extract({ use: [{ loader: "css-loader" }, { loader: "less-loader" }], // use style-loader in development fallback: "style-loader" }) }, { test: /.scss$/, use: extractTextPlugin.extract({ use: [{ loader: "css-loader" }, { loader: "sass-loader" }], // use style-loader in development fallback: "style-loader" }) } ] }, // 插件,用于生产模块和各项功能 plugins:[ // 配置uglify // new uglify(), new htmlPlugin({ // 对html文件进行压缩 minify:{ // 去掉属性的双引号 removeAttributeQuotes:true }, // 让开发中js有缓存效果,所以加入hash,这样可以有效避免缓存js hash:true, // 是要打包的html模板路径和文件名称 template:'./src/index.html' }),new extractTextPlugin('css/index.css') ], // 配置webpack开发服务功能 devServer:{ // 设置基本目录结构 contentBase:path.resolve(__dirname,'dist'), // 服务器的IP地址,可使用IP也可以用localhost host:'192.168.1.9', // 服务器压压缩是否开启 compress:true, // 配置服务端口号 port:1717 } }
13. 消除无用的css
PurifyCSS
使用PurifyCSS可以大大减少CSS冗余，比如我们经常使用的BootStrap(140KB)就可以减少到只有35KB大小。这在实际开发当中是非常有用的。
安装PurifyCSS-webpack
从名字你就可以看出这是一个插件，而不是loader。所以这个需要安装还需要引入。 PurifyCSS-webpack要以来于purify-css这个包，所以这两个都需要安装。
npm i -D purifycss-webpack purify-css
这里的-D代表的是–save-dev ,只是一个简写。
引入glob
因为我们需要同步检查html模板，所以我们需要引入node的glob对象使用。在webpack.config.js文件头部引入glob。
const glob = require('glob');
引入purifycss-webpack
同样在webpack.config.js文件头部引入purifycss-webpack
const PurifyCSSPlugin = require("purifycss-webpack");
plugins:[ //new uglify() new htmlPlugin({ minify:{ removeAttrubuteQuotes:true }, hash:true, template:'./src/index.html' }), new extractTextPlugin("css/index.css"), new PurifyCSSPlugin({ // Give paths to parse for rules. These should be absolute! paths: glob.sync(path.join(__dirname, 'src/*.html')), }) ]
//ES6输出 dist 绝对路径 const path = require('path'); // path.resolve(__dirname,'dist') 打印dist的绝对路径 //引入uglify const uglify = require('uglifyjs-webpack-plugin'); // 引入 html-webpack-plugin const htmlPlugin = require('html-webpack-plugin'); // 引入 extract-text-webpack-pluguin const extractTextPlugin = require("extract-text-webpack-plugin"); const glob = require('glob'); const PurifyCSSPlugin = require("purifycss-webpack"); var website ={ publicPath:"http://192.168.1.9:1717/" } module.exports={ // 入口文件位置 entry:{ entry:'./src/entry.js', entry2:'./src/entry2.js' }, // 出口文件位置 output:{ path:path.resolve(__dirname,'dist'), //name意思 是根据入口文件 打包的名称 打包出对应数量的 出口文件 filename:'[name].js', publicPath:website.publicPath }, // 模块:例如 图片CSS less sass typescript 转化压缩 module:{ rules:[ { test: /.css$/, use: extractTextPlugin.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader' ] }) } , { // 匹配图片文件后缀名称 test:/.(png|jpg|gif)/, // 是指定使用的loader和loader的配置参数 use:[{ loader:'url-loader', options:{ // 小于500000的文件打包成base64的格式写入js limit:500, outputPath:'images/' } }] }, { test: /.(htm|html)$/i, use:['html-withimg-loader'] },{ test: /.less$/, use: extractTextPlugin.extract({ use: [{ loader: "css-loader" }, { loader: "less-loader" }], // use style-loader in development fallback: "style-loader" }) }, { test: /.scss$/, use: extractTextPlugin.extract({ use: [{ loader: "css-loader" }, { loader: "sass-loader" }], // use style-loader in development fallback: "style-loader" }) } ] }, // 插件,用于生产模块和各项功能 plugins:[ // 配置uglify // new uglify(), new htmlPlugin({ // 对html文件进行压缩 minify:{ // 去掉属性的双引号 removeAttributeQuotes:true }, // 让开发中js有缓存效果,所以加入hash,这样可以有效避免缓存js hash:true, // 是要打包的html模板路径和文件名称 template:'./src/index.html' }), new extractTextPlugin('css/index.css'), new PurifyCSSPlugin({ // Give paths to parse for rules. These should be absolute! paths: glob.sync(path.join(__dirname, 'src/*.html')), }) ], // 配置webpack开发服务功能 devServer:{ // 设置基本目录结构 contentBase:path.resolve(__dirname,'dist'), // 服务器的IP地址,可使用IP也可以用localhost host:'192.168.1.9', // 服务器压压缩是否开启 compress:true, // 配置服务端口号 port:1717 } }
14. babel 转es6