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,重新起航');