webpack2 项目构建一
2017-07-01 18:03 龙恩0707 阅读(1123) 评论(1) 编辑 收藏 举报最近工作忙，学习被暂停了，还是网上多看看资料，多学习学习一下，看到一些好的资料，自己想整理一下，这不，webpack2项目构建都还没有弄懂，webpack3就已经发布了，说实话周末现在真不想看书和研究东西，拿着手机玩玩游戏，看看电视真爽，但是IT行业没有办法，技术在不断的更新，不学习安慰安慰一下自己，心里过不去，万一过1-2年被淘汰了，找份工作都不容易，因此还是多学习学习下，资料多整理一下，刚看完，阮一峰老师写的 45岁以后的人生
说实话，感慨肯定有，不要说45岁以后，就说30来岁，现在周末都不想去折腾技术，所以IT行业会为以后担忧的，好了先不说了；
项目的目录结构如下：
### 目录结构如下： demo # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有的依赖包 | |--- src # 项目的文件包 | | |--- common | | | |---css # 公用页面的css文件 | | | |---js # 公用页面的js文件 | |--- | |--- .babelrc # 支持es6 | |--- .gitignore | |--- README.md | |--- index.html # 首页入口文件 | |--- package.json | |--- webpack.config.js # 配置文件 | |--- webpack.production.config.js # 上线打包配置文件
webpack 配置项如下代码：
// 导入路径包 const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { //开启sourceMap便于调试 devtool: 'eval-source-map', //入口文件， entry: './src/main.js', output: { // 输出文件到当前目录下的 build文件夹内 path: path.resolve(__dirname, 'build'), publicPath: '/assets/', //指定资源文件引用的目录 filename: 'bundle.js' // 指定打包为一个文件 bundle.js // filename: '[name].js' // 可以打包为多个文件 }, // 使用loader模块 module: { /* * 在webpack2.0版本已经将 module.loaders 改为 module.rules, 当然module.loaders也是支持的。 * 同时链式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', // 参考 https://github.com/postcss/postcss-loader options: { plugins: function() { return [ require('autoprefixer') ]; } } }] }, { test: /\.styl(us)?$/, use: [ 'style-loader', 'css-loader', { loader: "postcss-loader", options: { plugins: function() { return [ require('autoprefixer') ]; } } }, 'stylus-loader'] }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ //需要排除的目录 } ] }, // 配置devServer各种参数 devServer: { // contentBase: "./", // 本地服务器所加载的页面所在的目录 hot: true, // 配置HMR之后可以选择开启 historyApiFallback: true, // 不跳转 inline: true // 实时刷新 }, plugins: [ new HtmlWebpackPlugin({ template: './index.html' // 模版文件 }), new webpack.HotModuleReplacementPlugin() // 热加载插件 ] }
package.json 打包配置如下：
"scripts": { "start": "webpack-dev-server", "build": "set NODE_ENV=production&&webpack --config ./webpack.production.config.js" },
在项目中 进入项目的根目录后，运行 npm run start 即可运行项目；
在webpack2.0中使用 module.rules 来 代替之前的 module.loaders， 并且使用了 postcss-loader 插件，该插件的作用是：
用来对 .css文件进行处理，并添加在 style-loader 和 css-loader 之后，通过一个额外的 postcss方法来返回所需要使用的 PostCss插件，比如，代码返回
require('autoprefixer') 的作用是 加载 Autoprefixer插件。那么Autoprefixer插件的作用是为 css中的属性添加浏览器特定的前缀，因为一些css新属性，
各个浏览器下并不支持，因此使用该插件就可以做这些事情，比如在页面的代码如下：
h1 {
display: flex;
}
那么实际在页面上，通过Autoprefixer插件会自动渲染为：
h1 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
该插件就是解决浏览器前缀的问题，当然还有很多插件都可以往这个里面加。
在webpack的配置文件中可以对devServer 配置如下：
devServer: {
// contentBase: "./", // 本地服务器所加载的页面所在的目录
hot: true, // 配置HMR之后可以选择开启
historyApiFallback: true, // 不跳转
inline: true // 实时刷新
}
这时候我们就可以监听入口文件的改变，比如目前项目中的入口文件是 main.js，那么main.js及所有通过import进来的css和js文件进来的，只要有修改，都会
实时刷新，但是html文件修改不能实时刷新了，修改后需要我们手动刷新了。如上配置 devServer的 "inline"选项会为页面添加 "热加载"功能，"hot"功能
会开启 "热替换"，即首先重新加载组件改变的部分(不是重新加载整个页面)，如果两个参数都有的话，当资源改变时，webpack-dev-server将先尝试 热替换，
如果失败则会重新加载整个页面。 但是要实现热加载的话，还需要在代码中加入如下代码：
plugins: [
new webpack.HotModuleReplacementPlugin() // 热加载插件
]
配置中 devtool: 'eval-source-map', 配置会生成map文件，便于调试代码。
webpack2.0增加了对ES6模块的支持，不需要任何配置，webpack只针对 import导入和export 导出 的模块才会被编译为ES5，如果想所有的打包文件被编译成ES5的话，需要使用babel编译器转换，因此需要按照babel，然后在项目的根目录文件下 添加 .babelrc文件即可；
{
"presets": [
["es2015", {"modules": false}]
]
}
并且在webpack中需要添加loader，如下：
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/ //需要排除的目录
}
