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 实时刷新
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
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
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
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
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
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
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
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
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.
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
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
参考文档:http://webpack.css88.com/