vue中webpack默认配置_webpack4.0从零配置实现简单的vue项目配置

简介

webpack4.0从零配置实现简单的vue项目配置

运行

npm i

npm run dev

记录

vue + webpack

安装webpack、webpack-cli(webpack4.0以上需要安装)

安装vue-loader

解析.vue 的文件

v15 的版本需要以插件方式引入才能正常使用

创建html文件

安装 html-webpack-plugin 插件 (引用后会生成默认的html文件)

配置模板

安装vue

module.exports = {

// ...

resolve: {

alias: {

'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'

}

}

}

安装

css-loader,style-loader 解析样式 .css

配置babel

安装 babel-loader babel-core babel-preset-env

配置 babel-loader

配置预处理器scss

npm install -D sass-loader node-sass

配置loader

配置postcss-loader

{

loader: 'postcss-loader',

options: {

plugins:[require('autoprefixer')],

browsers:['last 10 versions']

}

}

提取css(将css提取为单独的css文件，请在生产模式下开启，否则无法热加载)

npm install -D mini-css-extract-plugin

{

test: /\.css$/,

use: [

// 'style-loader',

MiniCssExtractPlugin.loader,

]

}

plugins:[

//提取css文件，请在生产环境下使用，否则无法热加载css

new MiniCssExtractPlugin({

filename: 'style.css'

}),

]

配置图片文件

npm i url-loader file-loader -D

url-loader会将小于limit大小的图片以base64方式，以减少http请求

大于的file-loader 进入处理

配置webpack-dev-server

12.清空打包输出目录

npm i -D clean-webpack-plugin

const cleanWebpackPlugin = require('clean-webpack-plugin')

new cleanWebpackPlugin([path.join(__dirname,'dist')]),

配置webpack-dev-server

npm i webpack-dev-server -D

plugins:[

new webpack.HotModuleReplacementPlugin(),

new webpack.NamedModulesPlugin(),//用户名替代id

]

devServer:{

contentBase: path.join(__dirname,'dist'),

compress: true,

host:'localhost',

port: 9000,

hot: true //开启热更新

}

Scope Hoisting

作用域提升，这是在webpack3中所提出来的。它会使代码体积更小，因为函数申明语句会产生大量代码.

const ModuleConcatenationPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');

plugins: [

// 开启 Scope Hoisting

new ModuleConcatenationPlugin(),

],

js优化

npm i webpack-parallel-uglify-plugin -D

const WebpackParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')

plugins: [

new WebpackParallelUglifyPlugin({

uglifyJS: {

output: {

beautify: false, //不需要格式化

comments: false //不保留注释

},

compress: {

warnings: false, // 在UglifyJs删除没有用到的代码时不输出警告

drop_console: true, // 删除所有的 `console` 语句，可以兼容ie浏览器

collapse_vars: true, // 内嵌定义了但是只用到一次的变量

reduce_vars: true // 提取出出现多次但是没有定义成变量去引用的静态值

}

}

})

]

作者：yanyongchao

链接：https://juejin.im/post/5ab7c222f265da237f1e4434

来源：掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

参考：

- vue-loader 官方文档

- webpack官方文档

- 文章： https://juejin.im/post/5ab79fa75188255582525400

- https://juejin.im/post/5abef5e96fb9a028e33b9035