最近学习vue,并想用vue开发项目，既然如此肯定抛不开webpack的使用，虽然vue已经提供了vue-cli脚手架，但是不妨自己配置一下，加深理解，本文发布主要方便自己记忆。只有写下了的才能更好记忆。 首先，安装webpack，个人建议全局安装,当然电脑中必须安装过node
npm i webpack --global //然而webpack4出来后，这样安装的webpack使用起来会报错，会叫你安装webpack-cli
//这是因为webpack4版本的相关命令都在webpack-cli中，可以这样使用
npm i webpack-cli --global //安装,注意的是，如果本地安装webpack-cli，使用的时候，要进入webpack目录下
复制代码这个时候已经是可以使用webpack4进行打包了，但是现在只可以打包js文件。webpack4对打包命令有更加严格的要求，之前的命令webpack main.js bundle.js也是不可用的。
npx webpack main.js -o bundle.js --mode development
复制代码这里不对webpack进行更多介绍，显然上面的命令是很麻烦的 首先可以配置package.json文件中scripts配置添加"build","webpack",算是约定俗成的规范，之后打包编译可以通过运行npm run build进行编译，当然现在还不可用。说了这么多终于到webpack.config.js的配置了。 在根目录创文文件webpack.config.js。添加如下代码：
const path = require('path') 根目录路径
module.exports = {
entry:'./src/index.js', //打包的入口文件
output:{
path:path.resolve(__dirname,'dist'), //出口文件路径
filename:'bundle.js' //出口文件名字
},
mode:'development' //环境为开发环境
}
复制代码这时可以执行npm run build命令进行打包了，当然只能打包js文件，可实际开发不可能只用js，那么css和图片怎么进行打包呢，这要借助于加载器插件了，也就是loader
npm i css-loader style-loader file-loader --save-dev
复制代码webpack.config.js中进行如下配置：
module: {
rules: [
{
test: /.css$/,
use: [
// 注意：顺序上不能改动
'style-loader',
'css-loader'
]
}，
{
test:/.(jpg|png|jpeg|svg|gif)$/,
use:[
"file-loader"
]
}
]
}
复制代码这样就可以对图片和css进行打包了，注意：图片打包，会形成新的路径，所以打包后的index.html是找不到图片的。这时候我们要把index.html文件也同样打包进去。
npm i html-webpack-plugin --save-dev //打包html用的插件
复制代码当然webpack.config.js要加入plugin配置
plugins: [
// 该插件的所用就是把 index.html 打包到你的 bundle.js 文件所属目录
new htmlWebpackPlugin({
template: './index.html'
})
]
复制代码现在路径问题也解决了，接下来让我们让webpack可以支持.vue文件,步骤比较类似
npm i vue-loader vue-templete-compiler
复制代码webpack.config.js中加入
{
test: /.vue$/,
use: [
'vue-loader'
]
}
}
复制代码.vue文件也可以打包了。在这里基本的webpack.config.js打包的配置已经完成了，不过为了方便开发，并且更多的兼容。实际开发中我们还要用到babel编译，
npm install --save-dev babel-loader babel-core babel-preset-env
复制代码webpack.config.js中添加
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/, // 不转换 node_modules 中的文件模块
use: {
loader: 'babel-loader',
options: {
presets: ['env'],
cacheDirectory:true,//缓存编译，可以增加编译速度
}
}
}
复制代码babel值转换语法，API的转换，我们要用babel-polyfill
npm i --save-dev babel-polyfill
复制代码配置上要改变webpack.config.js中的entry
entry: ['babel-polyfill', './src/main.js']
复制代码babel会给没给模块添加工具函数。这样会造成代码的重复，所以通过babel-transform-runtime解决
npm install babel-plugin-transform-runtime --save-dev
npm install babel-runtime --save
复制代码webpack.config.js中配置
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env'],
// 默认把打包的结果缓存到 node_modules/.cache 模板
cacheDirectory: true,
plugins: ['transform-runtime'] //加上这一行
}
}
}
复制代码为了方便开发，我们还可以引入插件webpack-dev-server
npm i -D webpack-dev-server
复制代码配置根目录
devServer: {
// 配置 webpack-dev-server 的 www 目录
contentBase: './dist'
},
复制代码配置npm script
"scripts": {
"build": "webpack",
"watch-build": "webpack --watch",
"dev": "webpack-dev-server --open"
},
复制代码接下来就可以通过
npm run dev
复制代码来启动项目了。不过现在还做不到热更新，如果想热更新只需在webpack.config.js配置中添加
const webpack = require('webpack')
//配置中加入下面两个对象
plugins:[
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
//并设置热更新为true
devServer:[
hot:true
]
复制代码补充一点，有些外部引用的代码实际上并不需要打包，以jquery为例：
externals:[
//key 就是包名
//value是全局的接口
jquery:'jQuery'
]
复制代码这样就可以过滤掉jquery。
最后补上完整的配置代码
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
module.exports = {
entry:['babel-polyfill','./src/index.js'],
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
mode:'development',
//第三方资源不进行打包
externals:[
//key 就是包名
//value是全局的接口
// jquery:'jQuery'
],
module:{
rules:[
{
test:/\.css$/,
use:[
'style-loader',
'css-loader'
]
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}
]
},
{
test:/\.(jpg|png|jpeg|svg|gif)$/,
use:[{
loader:"file-loader"
}]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory:true,
presets: ['env'],
plugins:['transform-runtime']
}
}
},
{
test:/\.vue$/,
use:[
'vue-loader'
]
}
]
},
plugins:[
//打包后图片路径改变，需要打包html
new HtmlWebpackPlugin(),
//热更新
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
devServer:{
// 配置webpack-dev-server的www目录
contentBase: './',
//热更新
hot:true
}
}
复制代码