webpack4例子


webpack.config配置

webpack本身是打包js的(不支持css,html,图片),但是如有打包css、html、图片…怎么办?必须要进行相关配置,也是基础CommonJs的规范

安装

//全局安装
npm install webpack -g
npm install webpack-cli -g

//生成package.json
npm init

//局部安装
npm install webpack  webpack-cli -S123456789

wenpack四个核心概念

  • 入口(entry)

  • 输出(output)

  • loader———->可以将所有类型转换成webpack能打包的东西(webpack本事只打包js)

  • 插件(plugins)———>打包和优化
    有效的打包或者压缩css,js,html,图片
    一般插件和loader配合使用

module.exports = {    entry: {        index: './src/js/index.js'    },    output: {        filename: '[name].bundle.js',        path: path.resolve(__dirname, 'dist'); //__diename是目录,“dist”是打包放置的文件名,意思是把目录和文件名链接起来    }}123456789

打包

webpack app.js –output bundle.js  //如果没有config webpack.config.js文件的打包方式
webpack –config webpack.conf.js  //这种是有webpack.config.js文件的情况下,而且要指定文件的情况下,没指定就查找默认的文件

//如果打包开发环境和生成环境的
压缩: webpack –mode production  
未压缩: webpack –mode development

演示

Demo1:webpack-dev-server(本地服务器)

//安装
npm i webpack-dev-server --save-dev

//webpack.config.js
  devServer:{    contentBase:"./public",  //本地服务器路径    //port:"8080", //端口(默认8080)    inline:true//实时刷新}

//package.json
"scripts": {    "start": "webpack --mode development",    "dev": "webpack-dev-server --open --inline"         },123456789101112131415

或者
“start”: “webpack-dev-server –mode development –open”,
 “build”: “webpack –mode production”

–open 自动打开 –inline 实时刷新

Demo

Demo2: css-loader 、less-loader

npm i  style-loader  css-loader --save-dev
module: {    rules: [      {         test: /\.css$/,         // use: 'css-loader'  //单个时        use: ['style-loader','css-loader'] //多个loader,从右向左处理      }    ]
  }12345678910

加上 less-loader:

npm i  style-loader  css-loader less less-loader --save-dev
module: {    rules: [        {             test: /\.css$/,             // use: 'css-loader'  //单个时            use: ['style-loader','css-loader']         },        {            test: /\.less$/,            use: [ {                loader: "style-loader" //3、如果要css嵌套在页面中要用style-loader                }, {                loader: "css-loader"  //2、然后交给css处理                }, {                loader: "less-loader" //1、先把less转换成css                }            ]        }    ]}123456789101112131415161718192021

如果想分离less文件就用extract-text-webpack-plugin(或mini-css-extract-plugin)这个插件

module: {    rules: [    {        test:/\.less$/,        use: extracTextPlugin.extract({            use:[{                loader:"css-loader"                },                {                loader:"less-loader"                }            ],            fallback:"style-loader"        })    }
   ]
},
plugins:[    new ExtractTextPlugin('./css/[name].css')]1234567891011121314151617181920

Demo

Demo3:postcss-loader、autoprefixer(自动补充css前缀)

//安装
npm i postcss-loader autoprefixer --save-dev

//postcss.config.js
module.exports = {    plugins : [        require('autoprefixer')({            browsers : ['last 5 versions']        })    ]}

//webpack.config.js
//在postcss-loader中引入autoprefixer插件
{     test: /\.css$/,     exclude: /(node_modules)/,     use: [         'style-loader', {             loader : 'css-loader',             options : {                 importLoaders : 1             },         },         'postcss-loader'     ]}123456789101112131415161718192021222324252627

Demo

Demo4: file-loader (打包html 、字体图标)

npm i  file-loader --save-dev
module: {    rules: [      {        test:/\.(jpg|png|jpeg|gif)$/, //图片处理        use: 'file-loader?limit=1024&name=./img/[name].[ext]'        //use: 'file-loader'       },       {        test:/\.(woff|ttf|svg|eot|xttf|woff2)$/,  //字体图标处理        use: 'file-loader?limit=1024&name=./fonts/[name].[ext]'       }    ]
  }1234567891011121314

Demo

Demo5: html-webpack-plugin  (js自行插入到html中)

//安装
npm i html-webpack-plugin --save-dev

//引入
const HtmlWebpackPlugin=require('html-webpack-plugin');

//配置
plugins:[
  new ExtractTextPlugin('./css/[name].css'),
  new HtmlWebpackPlugin({    template:"./src/index.html", //模板来源文件    // filename:"a.html"  //生成的模板文件的名字    minify:{//压缩 去除引号、注释、空属性、空格        removeAttributeQuotes:true,//去除引号        removeComments:true,//去除注释        removeEmptyAttributes:true,//去除空属性        collapseWhitespace:true//去除空格      }
  })
]1234567891011121314151617181920

参考https://segmentfault.com/a/1190000008590102

Demo

Demo6: html-withimg-loader (解决html里的img路径不对,用url-loader也能解决)

如果入口文件index.js中没有引入css(css中有img),就不会自动打包生成img,于是就获取不到img图片,那么html-withimg-loader就可以打包一份图片路径

//安装
npm i html-withimg-loader --save-dev

//配置
module: {    rules: [      {         test: /\.html$/,         use: 'html-withimg-loader'      }    ]
  }123456789101112

Demo

Demo7: extract-text-webpack-plugin  (将 CSS 提取到一个文件中)

把css单独打包到文件里

//安装
npm i extract-text-webpack-plugin@next --save-dev

//引入
const ExtractTextPlugin=require('extract-text-webpack-plugin');

//配置
module: {    rules: [      {        test:/\.css$/,        use:ExtractTextPlugin.extract({            fallback:"style-loader",            use:[{                loader:'css-loader',                options:{                  minimize:true                  //css压缩                }            }],            publicPath:"../"   //css里面的图片路径都正常        })      }    ]
  },
  plugins:[    new ExtractTextPlugin('./css/[name].css')
  ]12345678910111213141516171819202122232425262728

Demo

Demo8: mini-css-extract-plugin  (将 CSS 提取到一个文件中)

//安装
npm i mini-css-extract-plugin css-loader --save-dev

//引入
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

//配置
module: {    rules: [      {        test: /\.css$/,        use: [MiniCssExtractPlugin.loader, "css-loader"]      }    ]
  },
  plugins: [    new MiniCssExtractPlugin({      filename: "[name].css",      chunkFilename: "[id].css"    })
  ]123456789101112131415161718192021

Demo

Demo9:引入第三方文件(jquery,boostrap)

方法一:

//安装
npm i jquery -S

//引入
import $ from 'jquery'
$('body').css('background','red');123456

方法二:(cdn上的)

//index.html<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>//webpack.config.js
//项目里配置了自动提取node_modules里用到的模块如jquery,也可以在原模板里面通过第三方cdn引入,又是另一种配置了。在 webpack.base.conf.js利配置externals后webpack就不会去打包配置模块
  //externals就是webpack可以不处理应用的某些依赖库,使用externals配置后,依旧可以在代码中通过CMD、AMD或者window/global全局的方式访问。
  externals: {    'jquery': 'window.jQuery'
  },123456789

Demo

Demo10: babel

核心:babel-core
功能:babel-loader   babel-preset-env   babel-preset-react (使用babel编译react)
第一种方法:

//安装
npm i babel-core babel-loader   babel-preset-env   babel-preset-react --save-dev

//配置
 { 
     test: /\.(js|jsx)$/,     use: {         loader:"babel-loader",         options:{             "presets":['env','react']         }     },     exclude:/node_modules/
 },1234567891011121314

第二种方法:
新建.babelrc

//.babelrc 
{    "presets": [      "env",      "react"    ]}

//webpack.config.js   只是把上面的options去掉
 { 
     test:  /\.(js|jsx)$/,      use: {     loader:"babel-loader",     },     exclude:/node_modules/
 }12345678910111213141516

文档:https://babeljs.io/docs/en/plugins#pluginpresets-options.

Demo

Demo11: splitChunksPlugin(提取公共js)

splitChunksPlugin 默认配置项 :
{    "chunks": "all", //all, async, initial 三选一, 插件作用的chunks范围    "minSize": 0, // 最小尺寸    "misChunks": 1, //最小chunks    "maxAsyncRequests": 1, //最大异步请求chunks    "maxInitialRequests": 1, //最大初始化chunks    "name": undefined, //split 的 chunks name    "automaticNameDelimiter": "~", //如果不指定name,自动生成name的分隔符(‘runtime~[name]’)    "filename": undefined,     "cacheGroups": {} //字面意思缓存组,主要配置在这里}

cacheGroups配置项:
{    "priority": "缓存优先级权重",    "name": "split 出来的 chunk 的名字",    "chunks": "应该用范围",    "enforce": "未知",    "minSize": "最小尺寸",    "minChunks": "最小chunks",    "maxAsyncRequests": "",    "maxInitialRequests": "",    "filename": "最后output的文件名",    "reuseExistingChunk": "未知"}1234567891011121314151617181920212223242526
new webpack.optimize.SplitChunksPlugin({      cacheGroups: {        default: {          minChunks: 2,          priority: -20,          reuseExistingChunk: true,        },        //打包重复出现的代码        vendor: {          chunks: 'initial',          minChunks: 2,          maxInitialRequests: 5,          minSize: 0,           name: 'vendor'        },        //打包第三方类库        commons: {          name: "commons",          chunks: "initial",          minChunks: Infinity        }      }    }),    new webpack.optimize.RuntimeChunkPlugin({      name: "manifest"    }),1234567891011121314151617181920212223242526

Demo

Demo12:html-loader (实现资源复用)

解决jquery的引用,每次都要在页面上输入一遍,可以把它提取出来作为一个公共的部分(头部和尾部),用ejs需要html-loader作为中介
view
├── layout
│   ├── header.html
│   └── footer.html
├── index.html
└── login.html

//安装
npm i html-loader --save-dev

//index.html<%= require('html-loader!./layout/header.html')%><%= require('html-loader!./layout/footer.html')%>//webpack.config.js
// 获取html-webpack-plugin参数的方法 
var getHtmlConfig = function(name, title){ 
    return {         template : './src/view/' + name + '.html',         filename : 'view/' + name + '.html',         // favicon : './favicon.ico',         title : title,         inject : true,         hash : true,         chunks : ['common', name]     }; };

plugins: [    // html模板的处理     new HtmlWebpackPlugin(getHtmlConfig('index', '首页')),     new HtmlWebpackPlugin(getHtmlConfig('login', '商品列表'))],1234567891011121314151617181920212223242526

Demo

参考文档:http://webpack.css88.com/