手动构建Webpack开发环境
WebPack基础教程
Webpack开发环境配置
webpack+sass+babel+postcss配置
Webpack多页面配置
开发环境配置
接入门教程一
处理CSS的兼容性
-
通过postcss-loader来处理css的兼容性
我们可以通过post-css来处理我们的css兼容性,通过autoprefixer这个插件来让webpack自动为我们的css添加前缀
安装postcss-loader与autoprefixer
$ cnpm install postcss-loader autoprefixer --save-dev
-
安装完成以后,我们需要在webpack.config.dev.js中去配置我们的文件
{ test: /\.scss$/, use: [ "style-loader", "css-loader", { loader: "postcss-loader", options: { config: { path: path.join(__dirname, "./postcss.config.js") } } }, "sass-loader" ] }
说明:上面的代码,我们配置制到module里面的rules这个属性里在,我们处理了scss的文件,同时,在loader里面,我们添加了一项postcss-loader这个文件,在里面,我们配置了一项config。这个config就是postcss的配置,告诉webpack要怎么要去处理我们的css兼容性
-
在项目的根目录创建postcss.config.js文件,打开文件,去添加如下内容
var postcssConfig = { "plugins": { "autoprefixer": { //正常情况之下,我们应该配置一个浏览器列表,但是,我不推荐大家在这里配置 //babel也需要一个浏览器列表 } } } module.exports = postcssConfig; //module.exports={}
上面的代码是postcss.config.js的配置文件,在里面,我们配置了一个plugins插件,同时,指向了一个autoprefixer这个插件,这个插件的作用就是把我们的css前缀自动补全
-
在package.json里在,添加一个节点
browserslist
,告诉webpack我们要使用那些浏览器的兼容性"browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ]
-
这个时候,我们再看到的CSS就有经过兼容性处理了。如下图所示:
处理JS的兼容性
我们的CSS兼容性我们可以通过webpack来进行处理,同时,我们的css的兼容性也可以通过webpack来进行处理!同样,处理这个兼容性,我们也需要一个第三方的插件,这个插件就是我们的babel
babel是一个专门用于处理我们的es6代码的插件,它有一个特别重要的功能就是把我们的es6代码转换为我们浏览器所能够运行的普通代码
-
安装babel相关插件
$ cnpm install babel-core babel-loader
说明:上面的两个包就是专门用来处理我们的es6的两个babel插件
-
配置webpack.config.dev.js文件,让babel去处理我们的js代码
{ test: /\.js$/, use: [ "babel-loader" ], exclude: /node_modules/ }
说明:上面的代码告诉了webpack如何去处理我们的js代码,同时,最后一个exclude告诉webpack不要去处理node_modules里面的代码
-
在项目的根目录下面创建
.babelrc
的文件,这个文件是专门用来告诉webpack以一种什么样的规则去处理我们的js代码.babelrc
的配置如下{ "presets": [ "env", "stage-0" ] }
说明:babel会以我们package.json下面的
browserslist
里面的配置来处理我们的JS兼容性 -
因为上面的
.babelrc
配置里面使用了env
与stage-0
这两个处理规则,所以,我们需要安装这两个模块$ cnpm install babel-preset-env babel-preset-stage-0 --save-dev
-
安装babel专门用来处理异步async与await的模块
在babel里面,有一套专门用来处理异步操作的模块,这个模块叫babel-polyfill,现在,我们安装这个模块,用来去处理我们在开发过程当中所遇到的异步操作
$ cnpm install babel-polyfill --save-dev
-
在webpack.config.dev.js当中去配置babel-polyfill的配置
babel-polyfill需要配置在程序的启动的地方,这个时候,我们需要在webpack.config.dev.js里面的入口entry处去修改代码,将entry修改如下
entry: ["babel-polyfill", path.join(__dirname, "./src/js/main.js")]
经过上面的处理以后,我们就已经可以去让我们的JS代码经过webpack打包,让babel去转换,最终生成一个能够在浏览器上面运行的代码了
webpack生产环境的配置
在webpack里在,我们的操作一直都是在生产环境下面进行,如果要让我们编写好的html与css最终生成一个文件,这个时候,我们就需要在webpack当中去配置我们的生产环境
webpack的生产环境配置与开发环境大致相同,步骤如下:
-
首先,我们新建一个webpack的生产环境配置文件webpack.config.pro.js,将webpack.config.dev.js中的代码复制过来(在此处需要注意,不要把devServer里面的东西复制过来了,这个devServer是webpack开发环境独有的)
-
在webpack.config.pro.js的配置文件里面,我们要做到CSS样式与JS代码分离,就需要使用一个第三方插件包,这个插件叫
extract-text-webpack-plugin
,现在,我们安装这个插件$ cnpm install extract-text-webpack-plugin --save-dev
-
在webpack.config.pro.js时面去导入刚刚安装的模块extract-text-webpack-plugin
const ExtractPlugin=require('extract-text-webpack-plugin');
-
修改webpack.config.pro.js里面module下的rules里面的配置文件,把css以及scss的处理规则更改为如下:
{ test: /\.scss$/, use: ExtractPlugin.extract({ fallback: "style-loader", use: [{ loader: "css-loader", options: { minimize: true //生成的CSS代码进行压缩处理 } }, { loader: "postcss-loader", options: { config: { path: path.join(__dirname, "./postcss.config.js") } } }, "sass-loader" ] }) }
说明:在上面的代码当中,我们使用了ExtractPlugin这一个插件,这个插件就是我们刚刚在第三步的时候导入的插件,在css-loader里面,我们使用了个选项
minimize:true
的这个选项,这个选项的作用就是让生成的CSS代码做压缩处理 -
在webpack.config.pro.js的plugins的选项里面,添加ExtractPlugin插件,告诉webpack最终生成的css文件的名称是什么
plugins: [ new HTMLPlugin({ template: "index.html", filename: "aaa.html", inject: true }), new ExtractPlugin("index.css"), //指定新生成的css的文件名为index.css ]
代码说明:添加的
new ExtractPlugin("index.css")
代码新生成的css文件为index.css -
为生成的JS代码做压缩处理
我们的css代码可以做到压缩处理,同样,我们的JS代码也可以进行压缩,但是在压缩的过程当中,我们需要使用一个第三方的插件,这个插件就是
uglifyjs-webpack-plugin
,现在我们安装这个插件$ cnpm install uglifyjs-webpack-plugin --save-dev
-
在webpack.config.pro.js的这个配置文件里面,我们导入刚刚安装的插件,代码如下:
const uglifyjsPlugin = require('uglifyjs-webpack-plugin');
-
在webpack.config.pro.js的plugins里面,添加刚刚导入的插件,最终代码如下:
plugins: [ new HTMLPlugin({ template: "index.html", filename: "aaa.html", inject: true }), new ExtractPlugin("index.css"), //指定新生成的css的文件名为index.css new uglifyjsPlugin() ]
-
在package.json里面,添加生成的命令
在package.json的
scripts
的节点下面添加下面的命令中的build命令"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --config webpack.config.dev.js", "build": "webpack --config webpack.config.pro.js" }
至此,我们的生产环境就全部完成了,现在,我将开发环境的webpack.config.dev.js的代码与生产环境的webpack.config.pro.js的代码放到下面
-
webpack.config.dev.js代码
//开发环境 const path = require('path'); const HTMLPlugin = require('html-webpack-plugin'); var config = { entry: ["babel-polyfill", path.join(__dirname, "./src/js/main.js")], output: { filename: "bundle.js", path: path.join(__dirname, "/dist") }, module: { rules: [{ test: /\.js$/, use: [ "babel-loader" ], exclude: /node_modules/ }, { test: /\.scss$/, use: [ "style-loader", "css-loader", { loader: "postcss-loader", options: { config: { path: path.join(__dirname, "./postcss.config.js") } } }, "sass-loader" ] }, { test: /\.(jpg|jpeg|svg|bmp|gif|icon|png)$/, use: [{ loader: "url-loader", options: { name: '[name]-abc.[ext]' } }] }] }, plugins: [ new HTMLPlugin({ template: "index.html", inject: true }) ], devServer: { host: "0.0.0.0", port: 9999, overlay: { errors: true //将错误信息抛出到页面上面,提示出来 } } } module.exports = config;
-
webpack.config.pro.js代码
//生产环境 //开发环境 const path = require('path'); const HTMLPlugin = require('html-webpack-plugin'); const ExtractPlugin = require('extract-text-webpack-plugin'); const uglifyjsPlugin = require('uglifyjs-webpack-plugin'); var config = { entry: ["babel-polyfill", path.join(__dirname, "./src/js/main.js")], output: { filename: "bundle.js", path: path.join(__dirname, "/dist") }, module: { rules: [{ test: /\.js$/, use: [ "babel-loader" ], exclude: /node_modules/ }, { test: /\.scss$/, use: ExtractPlugin.extract({ fallback: "style-loader", use: [{ loader: "css-loader", options: { minimize: true //生成的CSS代码进行压缩处理 } }, { loader: "postcss-loader", options: { config: { path: path.join(__dirname, "./postcss.config.js") } } }, "sass-loader" ] }) }, { test: /\.(jpg|jpeg|svg|bmp|gif|icon|png)$/, use: [{ loader: "url-loader", options: { name: '[name]-abc.[ext]' //在生产环境下面,生成的新的文件的名称 } }] }] }, plugins: [ new HTMLPlugin({ template: "index.html", filename: "aaa.html", inject: true }), new ExtractPlugin("index.css"), //指定新生成的css的文件名为index.css new uglifyjsPlugin() ] } module.exports = config;