1.概念
webpack 是一个"模块打包器",它能根据模块的依赖关系递归的构建一个依赖关系图,当中包含了应用程序需要的所有模块,最后打包成一个或多个bundle
模块打包器:它做的事情是,它做的事情是,分析你的项目结构,找到JavaScript模块(commonJs)以及其它的一些浏览器不能直接运行的拓展语言(Scss,jsx,.vue)等,并将其打包为合适的格式以供浏览器使用
2.安装webpack
1.全局安装
$ npm install -g webpack webpack-cli 1
2.局部安装
$ npm install webpack webpack-cli --save-dev 1
注意:不同于webpack 3.x,webpack-cli 在webpack 4中被分离了,所以需要同时安装两个库
3.webpack 4个核心概念
- entry()
- output(输出)
- loader(转换器)
- plugins(插件)
1.entry(入口)
entry 入口用于指引webpack应该先从哪个模块开始,它是构建的入口,之后webpack会自动找出应用内其他相互依赖的内容进行打包.通过在webpack配置文件中配置entry属性来指定入口,虽然一般项目中只指定一个入口,但是实际上可以指定多个入口的
entry配置示例
module.exports={ entry:'./src/app.js' } 123
2.output(出口)
output出口 用于告诉webpack所构建的bundles在哪里输出,默认路径是 ./dist
output配置示例
module.exports={ entry:'./src/app.js', output:{ path:__dirname+'dist',//必须是绝对路径 filename:'bundle.js' } } 1234567
上面配置通过 output.path和output.filename属性来自定义webpack打包后bundle的路径和名称
3.loader(转换器)
loader用于配置webpack处理一些非js文件,因为 webpack本身只能理解javascript.
loader配置示例
module.exports = { //入口起点 entry: { main: __dirname + '/src/index.js' }, //出口 output: { path: __dirname + '/dist',//必须是绝对路径 filename: 'bundle.js' }, //模块处理 module: { rules: [ { test: '/\.scss$/',//用于标识出应该被对应的 loader 进行转换的某个或某些文件。 use: 'scss-loader'//表示进行转换时,应该使用哪个 loader。 } ] } } 1234567891011121314151617181920
上面的配置中,loader的test属性告诉webpack需要处理的对象,use属性告诉webpack用什么去处理.当webpack打包的时候会识别所有的后缀为.scss的文件,并用scss-loader转换.
4.plugins(插件)
plugins插件的主要作用是打包优化,压缩等,它的功能和loader一样非常强大,使用任何插件时,只需要require引入进来即可
plugins配置示例
var { VueLoaderPlugin } = require("vue-loader")//通过npm安装 module.exports = { //入口起点 entry: { main: __dirname + '/src/index.js' }, //出口 output: { path: __dirname + 'dist',//必须是绝对路径 filename: 'bundle.js' }, //模块处理 module: { rules: [ { test: '/\.scss$/',//用于标识出应该被对应的 loader 进行转换的某个或某些文件。 use: 'scss-loader'//表示进行转换时,应该使用哪个 loader。 } ] }, plugins: [ // vue编译需要插件的支持 new VueLoaderPlugin() ] } 1234567891011121314151617181920212223242526
5.webpack 模式
在项目中,会区分开发环境( development )和生产环境(production),两种环境,可以通过mode参数来配置
配置示例:
module.exports={ mode:'production' // production||development } 123
4.使用webpack
这是我webpack构建的小示例,文件目录:│ index.html│ package-lock.json│ package.json│ webpack.config.js├─dist│ bundle.js└─src│ app.js├─css│ index.scss
1.初始化
构建项目时,我们首先都要做的一件事就是npm init 初始化项目,然后生成一个package.json的文件
$ npm init -y 1
2.局部安装webpack
$ npm install webpack webpack-cli --save-dev 1
3.逐渐安装loader
a.将es6语法转为浏览器识别的es5语法
babel-loader ( ES6 => ES5 ,react) (babel-loader@7 babel-core babel-preset-es2015)
$ npm i babel-loader@7 babel-core babel-preset-es2015 -D 1
b. 将css 文件当成模块处理
css-loader,style-loader
$ npm i css-loader style-loader -D 1
c. scss 编译生成css文件
sass-loader node-sass
$ cnpm i sass-loader node-sass -D //node-sass使用npm下载比较慢,这里使用了cnpm 1
d.文件 copy 到目标文件夹
file-loader url-loader
$ npm i file-loader url-loader -D 1
注意:url-loader可以设置图片大小限制,当图片超过限制时,其表现行为等同于 file-loader,而当图片不超过限制时,则会将图片以base64的形式打包进css文件,以减少请求次 数。
e.处理css兼容
postcss-loader autoprefixer postcss
$ npm i postcss-loader autoprefixer postcss -D 1
4.配置文件webpack.config
var { VueLoaderPlugin } = require("vue-loader")//通过npm安装 module.exports = { //模式,区分开发环境或生产环境 mode:'production',// production||development //监听文件修改 watch:true, //热更新 devServer:{ contentBase: './', //以当前目录为项目的根目录 port: '3000', inline:true,//实时刷新 }, //入口起点 entry: { main: __dirname + '/src/app.js' }, //出口 output: { path: __dirname + '/dist',//必须是绝对路径 filename: 'bundle.js'//输出的文件名 }, //模块处理 module: { rules: [ {test: /\.css$/, use:['style-loader','css-loader']},//配置处理.css文件的第三方处理规则 {test: /\.less$/, use: ["style-loader",'css-loader','less-loader']}, {test: /\.scss$/, use: ["style-loader",'css-loader','postcss-loader','sass-loader']}, {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: "url-loader?limit=8000"}, {test: /\.(tff|eot|svg|woff|woff2)$/, use: "url-loader"}, {test:/\.js$/, use:'babel-loader',exclude:/node_modules/}, {test: /\.vue$/, use: 'vue-loader'} ] }, // plugins: [ // // vue编译需要插件的支持 // new VueLoaderPlugin() // ] } 12345678910111213141516171819202122232425262728293031323334353637383940
上述中可以通过watch属性来监听文件的改变,通过devServer实现热更新
package.json配置:
"scripts": { "dev": "webpack", "start": "webpack-dev-server" //热更新,直接npm start }, 1234
注意:在package.json中配置webpack.config.js的执行环境时,最完整的写法是
"scripts": { "dev": "webpack --config ./webpack.config.js" }, 123
其中,参数–config用于指定读取哪个配置文件.如果没有指定–config,webpack会默认读取webpack.config.js或webpackfile.js文件.项目中通常会配置两三个webpack配置文件.命名一般会带上环境,如webpack.config.base.js, webpack.config.dev.js和webpack.config.prod.js
然后终端执行
$ npm run dev 1
webpack基础介绍就在这里了,后面会详细讲解webpack的配置选项
webpack使用cross-env不同环境配置
一.项目背景
在配置webpack构建项目工程环境时,需要配置能够随时切换开发环境或生产环境,还有测试环境的打包命令,使用cross-env可以很轻松的解决问题
二.使用
1.cross-env的作用
cross-env的作用是不需要全局配置NODE_ENV,在scripts脚本中修改NODE_ENV的值从而实现不同环境中proccess.env.NODE_ENV的不同,而config的工作原理就是基于NODE_ENV这个值的,所以推荐两者结合使用。
2.安装
$ npm install --save-dev cross-env 1
3.嵌入命令使用
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js", "build": "cross-env NODE_ENV=production webpack --config webpack.config.js", 12
在执行命令前面嵌入cross-env的命令 NODE_ENV在全局可以使用,后面跟 环境的参数
4.获取全局变量
//webpack.config.js //获取全局环境变量(根据package.json里的cross-env配置取值) const NODE_ENV = process.env.NODE_ENV; 1234
根据NODE_ENV 可以区分相应的环境,然后做逻辑判断,处理开发环境和生产环境不同的打包命令!