webpack 简易配置入门教程 #12
Description
最近公司弄了个有150+页面的项目，心想，终于有机会可以去学习webpack了，以前想学却没有实际项目去引导逼迫去学，现在终于领略到了webpack的强大了。
什么是webpack
在前端的项目开发中，总有大量的页面和样式需要处理，而维护这些文件也成了头疼的问题。
为了简化开发，于是就有很多好的开发方式，如：
- 模块化开发。每个功能模块都分开成一个个独立的组件，需要的时候再引入。
- scss等预处理器。
- 使用pug, jade 更快编写HTML。
- ...
这些方式确实可以大大提高开发效率，但是每种方式都有自己的打包方式，还有兼容性处理，如果纯手动处理，必然会增加工作量。
但是，现在有了webpack，上述问题基本解决了，一个webpack就可以处理各种繁琐的过程，给你一个清爽，快速的开发环境。
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
简单的来说，在项目开发中，
- 你可以使用js，es6/7，甚至ts开发。
- es6/es7, .ts => .js
- 使用stylus, scss, less 等预处理器编写css
- .scss/.less => .css
webpack可以将你项目中的所有文件，处理成浏览器能识别的文件。
开始使用webpack
先新建一个练手用的空文件夹 $ mkdir webpack-demo ，并进入该文件夹。
-
新建
package.json.$ npm init
-
安装webpack及其基本插件。
$ npm i -D webpack extract-text-webpack-plugin html-webpack-plugin css-loader file-loader style-loader url-loader
其中：
- extract-text-webpack-plugin : 该插件主要为了抽离css样式，可以将css从打包的js中抽离出来。以link方式引入样式。
- html-webpack-plugin : 该插件主要是用于生成html文件，并可以根据入口文件来引入相应的文件。
- css-loader : 解析css文件中的
import和require，并处理他们。 - style-loader : 将css样式通过 style 标签注入到html文件中。
- file-loader : 指明webpack将所引入的对象，并返回一个公网能访问的url地址。
- url-loader : 将文件转换成 base64编码。
-
配置webpack。
新建一个配置文件：
$ touch webpack.config.jsvar webpack = require('webpack'); var path = require('path'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var HtmlWebpackPlugin = require('html-webpack-plugin'); var webpackConfig = { // 设置入口文件。 entry: './src/js/index.js', output: { // 设置输出文件夹 path: path.join(__dirname, 'dist'), // 设置公用文件夹路径 publicPath: '/', // 设置输出的js文件的名字规则。 // [name] 为chunk中的名称 // [hash] 为webpack生成的哈希值 filename: "js/[name].[hash].bundle.js" }, module: { rules: [{ // 处理css文件 test: /\.css$/, loader: "style-loader!css-loader" }, { // 处理html文件，并处理img 中 src 和 data-src 的引入路径 test: /\.html$/, loader: "html-loader?attrs=img:src img:data-src" }, { // 处理字体文件 test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader?name=./fonts/[name].[ext]' }, { // 处理图片，并将8k以下的图片转为base64编码 test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192&name=./img/[hash].[ext]' }] }, plugins: [ // 公共js提取 new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', // 将公共模块提取，生成名为`vendors`的chunk // minChunks: 3 // 提取至少3个模块共有的部分 }), // 提取公共css样式 new ExtractTextPlugin('./css/[name].css'), // 处理html文件。 new HtmlWebpackPlugin({ filename: './view/index.html', //生成的html存放路径，相对于path template: './src/view/index.html', //html模板路径 inject: 'body', //js插入的位置，true/'head'/'body'/false hash: true, //为静态资源生成hash值 // chunks: ['vendors', allDirs[i] + '/' + matches[1]], //需要引入的chunk，不配置就会引入所有页面的资源 minify: { //压缩HTML文件 removeComments: true, //移除HTML中的注释 collapseWhitespace: false //删除空白符与换行符 } }) ], // 设置开发服务器 devServer: { contentBase: path.join(__dirname, "dist/"), host: 'localhost', port: 9090, inline: true } } module.exports = webpackConfig
-
测试配置文件：
先设置开发文件夹目录：- webpack-demo + node_modules - src + js // 存放js文件 + css // 存放css样式 + view // 存放模板文件 webpack.config.js package.json新建一个 html 文件：
$ touch ./src/view/index.html。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Hello World</title> </head> <body> <h2>Hello World</h2> <p>This is from webpack-demo</p> </body> </html>
新建css文件：
$ touch ./src/css/index.css。h2{ color: red; opacity: 0.5; transform: rotateZ(-10deg); } p{ color: green; }
新建js文件：
$ touch ./src/js/index.js。// 引入css文件。 require('../css/index.css') console.log('hello world');
测试打包：
$ webpack
OK!基本的配置就完成了。
我们可以看到，在项目中多了一个dist文件夹，里面存放的就是刚刚打包好的文件。打开index.html（需要在服务器中打开，并且服务器根目录为dist）可以看到，生成的html文件，征程显示我们写的内容，css样式则直接写入了style标签当中，而且自动引入了两个js文件，其中，vendors是带有公共部分的js文件，index则是我们一开始写的js逻辑文件。
