关于Webpack

Webpack 是一个前端资源加载/打包工具。 它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

一份基本的Webpack配置文件

const HtmlWebpackPlugin = require("html-webpack-plugin"); //模版生成文件
const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const BabiliPlugin = require('babili-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

var HappyPack = require('happypack');


const PATHS = {
	app: path.join(__dirname,"app"),
	dist: path.join(__dirname,"dist")
}

const plugin = new ExtractTextPlugin({
	filename: 'css/[name].optimize.css',
	ignoreOrder: true
})

module.exports = {
    devServer: {
        host: process.env.HOST, // Defaults to `localhost`
        port: 80, // Defaults to 8080
        overlay: {
            errors: true,
            warnings: true,
        },
    }, //网页显示错误 端口设置
	entry: {
		app: PATHS.app+"/js",
	},
	output :{
		path: PATHS.dist,
		filename: "js/[name].js"
	},
	plugins: [
		new HtmlWebpackPlugin({
			title: "webpack demo",
			tmplete: "app/view/templete.html"
		}),
        plugin,
        new BabiliPlugin(), //js压缩
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.optimize\.css$/g,
            cssProcessor: require('cssnano'),
            cssProcessorOptions: { discardComments: {removeAll: true } },
            canPrint: true
        }), //css压缩
        new HappyPack({
            loaders: [ 'babel-loader?presets[]=es2015' ],
        })
	],
	module:{
		rules:[
			{
                test: /\.js$/,
                loader:'happypack/loader',
                 include: path.join(__dirname, "/app/js"),
                 exclude: path.join(__dirname, "/node_modules"), //加快编译速度
			},
			{
				test:/\.css$/,
                include: path.join(__dirname, "/app/css"),
                exclude: path.join(__dirname, "/node_modules"), //加快编译速度
				use: plugin.extract({
                    fallback: "style-loader", //在这里指定styleLoader 不要在use中
                    use: [{
                        loader: 'css-loader',
                        query:{
                            importLoaders : 1,
                            moudle:true
                        }
                    },'postcss-loader'],
				})
			},
            {
                test: /\.less$/,
                include: path.join(__dirname, "/app/css"),
                exclude: path.join(__dirname, "/node_modules"), //加快编译速度
                use: plugin.extract({
                    fallback: "style-loader", //在这里指定styleLoader 不要在use中
                    use: [{
                        loader: "css-loader" // translates CSS into CommonJS
                    }, 'postcss-loader',{
                        loader: "less-loader" // compiles Less to CSS
                    }]
                })
            },
            {
                test:/\.(png|jpg|jpeg|gif|svg)$/,
                include: path.join(__dirname, "/app/img"),
                exclude: path.join(__dirname, "/node_modules"), //加快编译速度
                use: 'url-loader?limit=8192&name=../images/[name].[ext]?[hash]'
            }
		]
	},
}

以上的配置是根据我自己的喜好和需求来进行的,并且我创建的两份,一份是上面的完整版,另一分删除了文件压缩功能,以求更方便的代码调试和快速的打包过程。

功能

我以我的这份配置来简单讲述一下webpack的功能

入口

webpack既然是一个打包工具,就需要一个入口,从这个入口顺藤摸瓜,找到所有用到的资源。可以配置多个入口

entry: {
	app: PATHS.app+"/js",
},

输出

output :{
		path: PATHS.dist,
		filename: "js/[name].js"
},

在设置了path之后,之后所有导出的东西都将会以这个为基础目录。 如果要设置下输出路径,需要在具体loader的filename设置

loader

loader是Webpack中一个核心的概念,我对它的理解就是给不同类型的文件做不同的处理,那么处理的工具就是Loader, 比如babel-loader就可以用来处理es6, less-loader可以处理less。

plugin

插件赋予了webpack更多更强大的功能,例如代码压缩,性能优化,自动生成HTML文件。

以上就是webpack配置文件的基本组成

常用启动参数

这方面我利用了npm的package.json来快速启动。 简述下基本用途

 "scripts": {
    "test": "echo \"Error: no test specified\", && exit 1",
    "build": "webpack --env production --config webpack.config.pro.js",
    "start": "webpack-dev-server --env development  --config webpack.config.dev.js",
    "status": "webpack --env production --config webpack.config.dev.js --profile --json > stats.json"
  },
  • build 用于文件的最终打包,生产环境,webpack.config.pro.js中有完整的打包,类似代码的压缩
  • start 用于工程的调试,开发环境,尽量以方便调试和快速打包为目的,利用WDS实现修改文件热刷新
  • status 用于生成打包json文件,可以用来进行可视化分析

install package

"devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babili-webpack-plugin": "^0.1.2",
    "css-loader": "^0.28.4",
    "eslint-loader": "^1.9.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.2",
    "happypack": "^4.0.0-beta.1",
    "html-webpack-plugin": "^2.30.1",
    "less": "^2.7.2",
    "less-loader": "^4.0.5",
    "optimize-css-assets-webpack-plugin": "^3.0.0",
    "postcss-loader": "^2.0.6",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "webpack": "^3.4.1",
    "webpack-dev-server": "^2.6.1"
  }

功能及用到的package

具体的用法可以参考官方文档或者我的config,

  • dev下自动热刷新 webpack-dev-server
  • less处理 less-loader
  • es6编译打包 babel-loader
  • 样式文件处理(经lessloader编译后) style-loader 和 css-loader
  • css压缩 optimize-css-assets-webpack-plugin
  • 将嵌入到js中的文件剥离为独立的css文件 extract-text-webpack-plugin
  • 打包多线程优化 happypack
  • 自动生成HTML文件并自动引入资源 html-webpack-plugin
  • css自动加兼容性前缀 postcss-loader
  • 图片处理小图>base64 大图src url-loader file-loader

多页面可以再入口中设置多个入口

一些比较高级的用法

模块热加载

多页面配置

利用模版语法让生成的HTML变得更加只能,比如访问当前页面的name并导入不同的script css

总结

Webpack与gulp相比能做的事情有些类似,但是webpack毫无疑问是更加贴近实际的需求的,gulp机械感会更强一些。而webpack它更像是一个从前端流程角度去思考问题解决问题的工具。

DEMO地址 https://github.com/zhangzhengyi12/WebpackDemo