1.什么是webpack,到底需要解决什么问题由于近年前端的快速发展,前端已不是简单的html, css, jquery这样一套技术了.前端的世界出现了越来越多的新的技术
- jsx(类xml语法,增强js语义,结构清晰抽象程度高,诞生了跨平台 react native
代码模块化)- scss, stylus, less预编译语言(缓解浏览器兼容造成的冗余,精简的语法)
- AMD CommonJS import(模块化方案)
- babel(转换下一代的js,jsx)
项目不可避免的膨胀,越来越复杂,自然而然的我们就会寻求各种优化,压缩代码的方案,前端工程化让我们非常头疼,在这个寻找前端模块化解决方案过程中我们了解到了webpack。webpack本质上是一种前端模块化自动打包的解决方案。更重要的是它可以通过配置就可以运用前端的各种技术。
2.webpack到底怎么配置,入门级配置不要把webpack想象成太过复杂的工具,可以把webpack看作是一个函数y = f(a,b,c....),配置文件就是函数的参数,我们需要加入合理的参数,运行函数就能得到我们所期望的y.
首先我们要有进入函数,和输出函数的"入口"和"出口"
(1)入口entry
一般我们的项目会有一个或者几个主文件,其他的文件都是依赖于这些文件的。
"入口"entry——咱们有三种值:
1.字符串:如entry:'./src/index.js',字符串也可以是函数的返回值,如entry: () => './demo',单一入口占位符[name]值为main(关于占位符,稍后详述);
2.数组形式,如[react,react-dom],可以把数组中的多个文件打包转换为一个chunk;
3.对象形式,如果我们需要配置的是多页应用,或者我们要抽离出指定的模块做为公共代码,就需要采用这种形式了,属性名是占位符[name]的值,属性值可以是上面的字符串和数组,如下:
// 值得注意的是入口文件有几个就会生成几个独立的依赖图谱。entry:{ main:'./src/index.js', second:'./src/index2.js', vendor: ['react','react-dom']}
(2)出口ouput
最基本的设置包括 filename 和 path 两项,publicPath则是控制打包文件的相对和绝对路径的。实际开发中我们常常需要对代码进行分割,方便按需加载,在ouput 中设置是chunkFilename。
[JavaScript] 纯文本查看 复制代码 module.exports = { entry: { app: './src/main.js' }, output: { path: path.join(__dirname, './dist' filename: '[name].js',
chunkFilename: 'js/[name].chunk.js', publicPath: '/dist/' }
}
[name]为占位符,webpack中有很多种占位符常见的有以下:
- [name]:代表打包后文件的名称,在entry或代码中确定;
- [id]:webpack给块分配的内部chunk id,如果你没有隐藏,你能在打包后的命令行中看到;
- [hash]:每次构建过程中,生成的唯一 hash 值;
- [ext]:资源扩展名,如js, jsx, png等等。
(3)"webpack函数参数一": module(对模块的处理配置)
文件即模块,我们常常在webpack中这样听到,但是本质上还是有区别的,模块不一定都是独立的模块,webpack内置支持的模块类型如下:
- CommonJS require
- es6(ES2015) import
- AMD require
- css/stylus/less @import
我们都知道webpack只能处理js文件,所以我们需要通过loader对模块进行预处理,它可以使得webpack可以打包任何JS之外的静态资源。
loader在module.rules中进行例如:
[JavaScript] 纯文本查看 复制代码 module: { rules: [ { test: /\.vue$/,
use: { loader: 'vue-loader', options: vueLoaderConfig
} }, { test: /(\.jsx\.js)$/,
use: { loader: 'babel-loader', include: ["es2015", "react"]
} }
每个rule做的主要的两件事情——识别文件类型,使用相应的xx-loader对文件进行操作转换。loader的功能超乎你想象除了上面的转换编译,还能处理样式,处理模板语言,测试等等
(提示:使用loader,记得在package.json内安装相应的loader)
(4)"webpack函数参数二": plugins插件
插件本身就是一种函数, 这就像是嵌套函数 ,webpack函数内再嵌套了插件函数。插件函数按照我们的需求可以实现不同的功能。
其中最主要的两个功能——
- webpack前阶段打包后的代码进行处理,分割代码, 替换内容等
CommonsChunkPlugin(抽离代码抽离不同文件的共享代码减少chunk间的重复代码)
HtmlWebpackPlugin(用前要安装,为我们自动生成一个html文件,该文件自动依据 entry的配置引入依赖)
[JavaScript] 纯文本查看 复制代码 plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
new FriendlyErrorsPlugin()
]
(5)其他配置
devtool: '#cheap-module-eval-source-map' //打包后的代码和原始代码往往有很大的差异,devtool控制如何生成source map,而[JavaScript] 纯文本查看 复制代码 cheap-module-eval-source-map更快对于development
resolve: {
modules: ['node_modules'],
extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'],
alias: {
'react-native': 'react-native-web',
},
//确定模块如何被解析,webpack给予默认值,也可以通过自定义配置,对模块可以更加精细的控制
- watch: 启用 Watch 模式后,webpack 将持续监听任何已解析文件的更改,重新构建文件,Watch 模 式默认关闭,在开发时候如果开启会很方便。
- watchOptions: 一组用来定制 Watch 模式的选项: 详见 watch。
- performance: 本配置让你设置打包后命令行中该如何展示性能提示,比如是否开启提示,资源如果超过某个大小时该警告还是报错,详见 performance。
- stats:本选项让你配置打包过程中输出的内容,如没有输出none,标准输出normal,全部输出verbose,只输出错误errors-only等等。
|