webpack——3.x版本总结
一、webpack的作用
1.打包： 把多个javascript文件打包成一个文件，减少http请求，减轻服务器的压力
2.转换： 把浏览器不能识别的语言转换成javascript,让浏览器能够识别
3.优化： 优化和提升性能
二、webpack的安装
1.npm install -g webpack //全局安装，一般不推荐
2.对项目目录进行安装
新建一个项目
npm init //初始化项目，生成packge.json文件
npm install --save-dev webpack //--save是保存到ppackge.json中,dev是在开发中使用这个包，生产环境中不使用
三、建立项目基本结构
在根目录中建立src和dist文件夹
src文件夹用来存放我们编写的javascript代码——开发环境
dist文件用来处存放供浏览器读取的文件，及webpack打包成的文件——生产环境
四、webpack.config.js
const path = require('path'); //webpack.config.js文件中只能用require引入文件
const uglify = require('uglifyjs-webpack-plugin'); //js压缩插件
const htmlPlugin = require('html-webpack-plugin'); //打包压缩html文件
const extractTextPlugin = require("extract-text-webpack-plugin"); //从js中提取css的插件
module.exports = {
entry: {
entry: './src/entry.js' //入口文件，entry文件名可以自己取
entry2: './src/entry2.js' //多入口
}，
output: {
path: path.resolve(__dirname,'dist'), //获取项目的绝对路径
filename: 'bundle.js' //打包的文件名
filename: '[name].js' //多入口文件时的配置,根据入口文件的名称，打包成相同的名称
},
module: {
rules: [
{
test: /\.css$/,
use: [{
loader:'style-loader'
},{
loader:'css-loader'
}]
},{
test: /\.(png|jpg|gif)/i,
use:[{
loader: 'url-loader'，
options: {
limit: 50000，
outputPath: 'images/' //将图片放到指定的文件夹下
}
}]
},{
test: /\.less$/,
use: {{
loader: "style-loader"
},{
loader: "css-loader"
},{
loader: "less-loader" //解析less文件
}}
}
]
},
plugins: [
new uglify(),
new htmlPlugin({
minify:{
removeAttributeQuotes: true, //对HTML文件进行压缩，去掉属性的双引号
hash: true, //避免缓存js
template: "./src/index.html" //要打包的html模板路径和文件名称
}
}),
new extractTextPlugin('/css/index.css') //这里的/css/index.css是分离后的路径
],
devServer: {
contentBase: path.resolve(__dirname,'dist'), //配置服务器基本运行路径，用于找到程序打包地址
host: 'localhost', //服务器的ip地址
compress: true, //服务器压缩是否开启
port: 8088 //配置服务端口号
}
配置server 1.npm install webpack-dev-server --save-dev
2.在package.json中配置
"scripts" {
"server": "webpack-dev-server --open",
"build": "webpack" //用npm run build 进行打包
}
3.在命令行中输入npm run server打开服务器
entry: 入口文件的配置项,可以是单一入口，可以是多入口
output: 出口文件的配置项
module: 模块，主要是解析css和图片转换压缩等功能
plugins: 配置插件，根据需求配置不同功能的插件
devServer: 配置开发服务功能
打包css文件
1.在entry.js中引入css
2.npm install style-loader css-loader --save-dev
css中的图片处理
cnpm install --save-dev file-loader url-loader //file-loader解决图片的路径问题,url-loader解决图片较多引起的性能问题
css分离extract-text-webpack-plugin
npm install --save-dev extract-text-webpack-plugin
修改style-loader和css-loader
{
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
打包less文件
npm install --save-dev less less-loader
把less文件分离
｛
test: /\.less$/,
use: extractTextPlugin.extract({
use: [{
loader: "css-loader"
},{
loader: "less-loader"
}],
fallback: "style-loader"
})
｝
给css自动添加前缀
npm install --save-dev postcss-loader autoprefixer
在项目根目录建立一个postcss.config.js文件
module.exports = {
plugins: [
require('autoprefixer')
]
}
编写loader
{
test: /\.css$/,
use: [
{
loader: "style-loader"
},{
loader: "css-loader",
options:{
modules: true
}
},{
loader: "postcss-loader"
}
]
}
配置提取css的loader配置
{
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: 'style-loader',
use: [
{loadder: 'css-loader',options: {inportLoaders:1}},
'postcss-loader'
]
})
}
消除未使用的css PurifyCSS
npm i -D purifycss-webpack purify-css
const glob = require('glob');
const PurifyCssPlugin = require('purifycss-webpack');
plugins: [
new extractTextPlugin('css/index.css'),
new PurifyCSSPlugin({
paths: glob.sync(path.join(__dirname,'src/*.html')) //主要是需找html模板，purifycss根据这个配置会遍历你的文件，查找哪些css被使用了
}) //使用这个插件必须配合extract-text-webpack-plugin这个插件
]
es6转换器babel
npm install --save-dev babel-preset-env
新建.babelrc文件
｛
"presets": ["react","env"]
｝
.webpck.cnfig.js里的loader配置、
｛
test: /\.(jsx|js)$/,
use: {
loader:＇babel-loader',
},
exclude: /node-modules/
｝
用plugin引入插件
const webpack = require('webpack');
plugins: [
new webpack.ProvidePlugin({
$:"jquery"
})
]
watch的配置，保存后同步打包 webpack -watch
watchOptions:{
poll: 1000, //检测修改的时间，以毫秒为单位
aggregateTimeout: 500, //500毫秒内重复保存不进行打包
ignored: /node_modules/
}
BannerPlugin插件,在js文件中加入版权或者开发者声明
const webpack = reqire('webpack');
new webpack.BannerPlugin('2018,重新起航');
