一直以来使用webpack都是用的别人的配置,这几天自己学习了一下。
项目地址:https://github.com/donghaohao…
新建整个工程
npm init
安装依赖,这里我们开发vue项目,
npm install vue --save
,然后是开发时的依赖npm install --save-dev
这里有个重点是写package.json里面的scripts,因为我们要分开发环境和生产环境。开发环境使用
webpack-dev-server
热替换,生产环境需要压缩,加hash等。使用npm run dev 或 npm run build 就可以运行下面的脚本。
"dev": "webpack-dev-server --inline --hot --compress --history-api-fallback --config webpack.dev.config.js",
"build": "webpack --progress --hide-modules --config webpack.prod.config.js"
配置
这里分为三个:webpack.base.config.js webpack.dev.config.js webpack.prod.config.js
entry设置入口文件,可以设置多个,就会打包成多个,vendors是我们如果引用了vue,jQuery等,就不会把这些和代码打包到一起,会另外生成vendor.js。
entry: { main: './src/index.js', vendors: ['vue'] },
输出目录,这里path是最后打包完的输出目录,publicPath是server上的目录,这个自行设置好路径。我们在开发模式的时候并不会输出到目录的。
webpack主要就是各种loader,这个可以参考我的github上的,需要解释的有两点,一是使用vue-loader时,因为需要使用postcss,所以下面需要这样写:
vue: { autoprefixer: false, postcss: [ nested(), cssnext({ browsers: ['last 2 versions', 'Android >= 2.1', 'iOS >= 7.0'] }), flexFallback(), ], },
二个就是使用url-loader时,它会自动在图片后面加hash,强迫症患者表示不行,我们在开发模式下不加,生产模式下加。
// 开发模式 config.module.loaders.push({ test: /\.(gif|jpg|png|jpeg|svg)\??.*$/, loader: 'url-loader?name=[name].[ext]&limit=8192' });
// 生产模式 config.module.loaders.push({ test: /\.(gif|jpg|png|jpeg|svg)\??.*$/, loader: 'url-loader?limit=8192' });
preLoaders 就是提前处理,这里我们使用了eslint,需要检查书写规范,然后添加
.eslintrc
文件.resolve,extensions就是你require的时候可以省略扩展名,alias就是别名,在require的时候直接使用别名,避免写的太长。
resolve: { // 扩展,require时省略扩展名 extensions: ['', '.js', '.vue'], // 别名 alias: { filter: path.join(__dirname, './src/filters'), components: path.join(__dirname, './src/components') } }
插件
ExtractTextPlugin
提取CSS。HtmlWebpackPlugin
生产html,这个可以自己生成也可以指定模板,会将打包的js和css插入到html中,这个有好多其他参数,可自行搜索。webpack.optimize.CommonsChunkPlugin
这个为了抽取前面vendor里的第三方库,打包成另外的文件。webpack.optimize.UglifyJsPlugin
压缩代码。(生产模式)CleanWebpackPlugin
这个是我最新发现的一个,主要是在打包到dist之前先删除以前的dist,因为加hash厚并不会覆盖。(生产模式)
这里使用了ES6,所以要配置一下.babelrc。
增加项目文件
这里我只是增加了一些测试的项目文件,开发和生产都正常,如有需要可以自行添加其他目录。