标签：plugin hash 完整 基于 常用 rman use 文件 端口
webpack是一款模块加载器兼打包工具，把JS、样式，图片都作为模块来使用和处理。项目下有个配置文件webpack.config.js，用来告诉webpack需要做什么，本项目的webpack.config.js文件内容如下：
引入模块：
var path = require(‘path‘) var webpack = require(‘webpack‘)
入口文件及输出文件配置：
通过entry节点可以配置入口文件，且支持多个入口文件，每个模板只会有一个入口文件。
通过oupput节点可以配置输出文件，输出文件的文件名是根据入口文件来配置的，[name]的相应内容是entry节点下对应该的key,如下，则会输出/dist/builg.index.js和dist/build.user.js两个文件。
module.exports = {
//入口文件 entry: { index:‘./src/index.js‘, user:‘./src/user.js‘ },
//输出文件 output: { path: path.resolve(__dirname, ‘./dist‘), publicPath: ‘/dist/‘, filename: ‘build.[name].js‘ } }
模块加载器：
它告知webpack每一种文件都需要使用什么加载器来处理，常用的加载器有style-loader,css-loader,sass-loader,url-loader;
module.exports = { module: { rules: [ {
//把vue文件输出成组件 test: /\.vue$/, loader: ‘vue-loader‘, options: { loaders: { ‘scss‘: ExtractTextPlugin.extract(‘vue-style-loader!css-loader!sass-loader‘), ‘sass‘: ExtractTextPlugin.extract(‘vue-style-loader!css-loader!sass-loader?indentedSyntax‘) } } }, {
//将所有目录下的es6代码转译为es5代码，但不包含node_modules目录下的文件 test: /\.js$/, loader: ‘babel-loader‘, exclude: /node_modules/ }, {
//用于打包图片 test: /\.(png|jpg|gif|svg)$/, loader: ‘file-loader‘, options: { name: ‘[name].[ext]?[hash]‘ } }, {
//把scss文件转译成css文件 test: /\.scss$/, loader:ExtractTextPlugin.extract({ fallbackLoader: ‘style-loader‘, loader: ‘css-loader!sass-loader‘ }) } ] } }
别名设置：
设置别名后，就不需要写真实的路径，只需用别名代替，如：require(‘httpHelper‘)。
resolve: { alias: { ‘vue$‘: ‘vue/dist/vue.common.js‘,
‘httpHelper‘: ‘src/util/httpHelper.js‘ } }
插件配置：
extract-text-webpack-plugin插件，不把样式打包到脚本中，而是独立打包样式文件，生成新的css文件。
//样式打包 var ExtractTextPlugin = require(‘extract-text-webpack-plugin‘);
plugins: [
new ExtractTextPlugin("./[name].css")
]
构建本地服务器：
该服务器基于node.js构建，可让浏览器监测代码的修改，并自动刷新,默认端口为‘8080’。
安装：npm install --save-dev webpack-dev-server
devServer: { historyApiFallback: true, noInfo: true }
判断是生产环境还是开发环境：
以下代码中NODE_ENV的配置是与package.json文件下的scripts节点下的内容相关，module.exports.plugins里的插件配置会合并到plugins:[new ExtractTextPlugin("./[name].css")]中。
if (process.env.NODE_ENV === ‘production‘) { module.exports.devtool = ‘#source-map‘ module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ ‘process.env‘: { NODE_ENV: ‘"production"‘ } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) }
完整代码如下：
var path = require(‘path‘) var webpack = require(‘webpack‘)
//样式打包 var ExtractTextPlugin = require(‘extract-text-webpack-plugin‘) module.exports = {
//入口文件配置 entry: { index:‘./src/index.js‘, user:‘./src/user.js‘ },
//输出文件配置 output: { path: path.resolve(__dirname, ‘./dist‘), publicPath: ‘/dist/‘, filename: ‘build.[name].js‘ }, module: { rules: [ {
//把vue文件输出成组件 test: /\.vue$/, loader: ‘vue-loader‘, options: { loaders: { ‘scss‘: ExtractTextPlugin.extract(‘vue-style-loader!css-loader!sass-loader‘), ‘sass‘: ExtractTextPlugin.extract(‘vue-style-loader!css-loader!sass-loader?indentedSyntax‘) } } }, {
//将所有目录下的es6代码转译为es5代码，但不包含node_modules目录下的文件 test: /\.js$/, loader: ‘babel-loader‘, exclude: /node_modules/ }, {
//用于打包图片 test: /\.(png|jpg|gif|svg)$/, loader: ‘file-loader‘, options: { name: ‘[name].[ext]?[hash]‘ } }, {
//把scss文件转译成css文件 test: /\.scss$/, loader:ExtractTextPlugin.extract({ fallbackLoader: ‘style-loader‘, loader: ‘css-loader!sass-loader‘ }) } ] }, resolve: {
//设置别名 alias: { ‘vue$‘: ‘vue/dist/vue.common.js‘ } }, plugins: [
//样式输出路径 new ExtractTextPlugin("./[name].css") ], devServer: { historyApiFallback: true, noInfo: true }, performance: { hints: false }, devtool: ‘#eval-source-map‘ } if (process.env.NODE_ENV === ‘production‘) { module.exports.devtool = ‘#source-map‘ module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ ‘process.env‘: { NODE_ENV: ‘"production"‘ } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) }
标签：plugin hash 完整 基于 常用 rman use 文件 端口
原文地址：http://www.cnblogs.com/kerry-xu/p/6357368.html
