webpack2.0搭建前端项目的教程详解

一、什么是webpack:

webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。

注意: 目前最新为webpack2.0版本,与1.0有一些出入

二、初始化项目

npm install webpack --save-dev

三、安装loader,stylus以及postCss

css-loader stylus-loader stylus --save-dev npm install --save-dev postcss-loader autoprefixer

四、目录结构大致如下

五、添加webpack.config.js 配置如下:

module.exports = {
entry: './src/main.js',//入口文件
output: {
path: path.resolve(__dirname,'build'),// 指定打包之后的文件
     // publicPath: '/assets/',// 指定资源文件引用的目录,也就是说用/assests/这个路径指代path,开启这个配置的话,index.html中应该要引用的路径全部改为'/assets/...'
// filename: 'bundle.js' // 指定打包为一个文件 bundle.js
filename: '[name].js' // 可以打包为多个文件
},// 使用loader模块
module: {
/ 在webpack2.0版本已经将 module.loaders 改为 module.rules 为了兼容性考虑以前的声明方法任然可用,
      同时链式loader(用!连接)只适用于module.loader,
      同时-loader不可省略
/
rules: [{
test: /.css$/,use: [
'style-loader',{
loader: 'css-loader',options: {
// modules: true // 设置css模块化,详情参考https://github.com/css-modules/css-modules
}
},{
loader: 'postcss-loader',// 在这里进行配置,也可以在postcss.config.js中进行配置,详情参考https://github.com/postcss/postcss-loader
options: {
plugins: function() {
return [
require('autoprefixer')
];
}
}
}
]
},{
test: /.styl(us)?$/,'css-loader',{
loader: "postcss-loader",options: {
plugins: function() {
return [
require('autoprefixer')
];
}
}
},'stylus-loader'
]
}]
}
}

在index.html中引入'/build/main.js'。main.js 代码如下

六、通过webpack-dev-server实现页面自动刷新。

首先安装webpack-dev-server

然后修改package.json配置文件中:

使用npm start 启动服务。npm的 start是一个特殊的脚本名称,它的特殊性表现在,在命令行中使用npm start就可以执行相关命令,如果对应的此脚本名称不是start,想要在命令行中运行时,需要这样用npm run {script name} ,所以打包命令修改npm run build

这里如果使用webpack-dev-server 命令来启动就必须全局安装 devServer:

在webpack的配置文件中可以对devServer进行配置

页面所在的目录 historyApiFallback: true,// 不跳转 inline: true // 实时刷新 }

此时可以监听入口文件的改变,实时刷新页面,然而非入口文件的改变则不会被监听到,需要手动进行刷新。并且目标文件包括index.html。这里使用html-webpack-plugin插件

修改webpack配置文件添加以下配置:

module.exports = {
....,plugins: [
new HtmlWebpackPlugin({
template: './index.html' // 模版文件
})
]
}

这里记录一下遇到的坑:首先,devServer其实读取的是打包之后的文件,但是这些文件是存储在内存当中(并不会显示在build下)。然后由于使用HtmlWebpackPlugin这个插件,它可以自动帮你将打包的js插入模版html文件中,因此我们要将原文件(就是作为模版的index.html文件)中插入的main.js这行代码去掉。然后如果开启了publicPath这个选项,HtmlWebpackPlugin会插入publicPth选项的路径('/assets/main.js'),devServer的index.html此时是无法读取到该目录下的文件。但是奇怪的是devServer此时直接没有插入该scripts。。不知道为啥。。但是为了部署的问题,cdn啥的,对开发环境和生产环境应该开启不同的publicPath,也就是说开发和生产应该使用两个不同的配置文件包括sourcemap,devserver都不应该出现在生产的配置中)。

七、sourcemap 让开发更易于调试

生成Source Maps,选择合适的选项 .... } }

八、使用ES6语法

webpack2.0增加了对ES6模块的支持,无需额外的配置,并且可以与 AMD 和 CommonJS混用。webpack 2可以分析理解所有的ES6代码并且只在检测到是ES6模块时才使用tree-shaking。然而,只有import导入和export导出的模块才会被编译为ES5,如果希望所有的打包文件都编译为ES5,你需要使用一个转译器来处理剩下来的文件。这里我使用babel。首先安装babel:

在根目录下添加.babelrc文件,并添加配置

如果bable的配置仍然为:

那么无用的代码也会被打包(Babel会将ES 6模块通过commonJs模块转换输出,然后webpack 2就不能进行tree-shaking分析了)。这块儿大致原理是这样的。。。

因此我们将配置文件改为:

并且在webpack的配置文件中加入如下loader(此处一定不能用use,不知道为啥)

九、热加载模块(HMR)

webpack配置文件中,devServer的“inline”选项会为入口页面添加“热加载”功能,“hot”选项则开启“热替换(Hot Module Reloading)”,即尝试重新加载组件改变的部分(而不是重新加载整个页面)。如果两个参数都传入,当资源改变时,webpack-dev-server将会先尝试HRM(即热替换),如果失败则重新加载整个入口页面。要使用HRM,首先需要在webpack配置文件中配置plugin:

插件 ]

到这一步,实际上改变css可以实现hrm,然而js只会刷新整个页面,index.html直接不刷新了。。。不知道为啥。react可以通过react-transform-hrm来搞定。非react框架现在考虑用webpack-dev-middleware 来尝试一下

十、生产环境

通过以上步骤基本的开发环境就搭建完毕了,那么实际上在生产环境里可能会有其他的要求,例如分离js与css(目前css是打包到js中去的),例如压缩代码等。

首先创建一个webpack.production.config.js,然后在package.json中配置修改为:

当运行 npm run build 的时候,会设置环境变量"NODE_ENV"为"production"。

现在分别介绍几个常用的插件

1.提取公共模块插件(webpack内置) CommonsChunkPlugin

2.压缩js插件(webpack内置) UglifyJsPlugin

3.分离css文件: ExtractTextPlugin 注意该插件由于和webpack2不兼容,需要指定版本。。在webpack.production.config.js 中的配置,注意与1.x版本loader的写法不同。

4.清除文件夹: clean-webpack-plugin

运用[hash]使得产生的文件名带有哈希值,合理使用缓存。

项目地址: https://github.com/Dyzzi/webpack-demo-project

本地下载:

总结

以上就是这篇文章的全部内容了,至此大致的开发以及生产环境已经搭建完毕。希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对编程之家的支持

相关文章

事件冒泡和事件捕获 起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支持第三个参数...
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型,number类型相当于其他强类型语言...
什么是跨域 跨域 : 广义的跨域包含一下内容 : 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源...
@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知,也是须知的必须有...
搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : 的缩写,说都能直接说出来 :模型, :视图, :视图模...
首先我们需要一个html代码的框架如下: 我们的目的是实现ul中的内容进行横向的一点一点滚动。ul中的内容...