webpack配置打包vue⽂件
1、⾸先全局安装node，和npm。检查是否安装成功
2、新建⼀个⽂件下，进⼊该⽂件夹。
前先执⾏  npm init -y  然后就会在⽂件夹下出现⼀个package.json⽂件
然后执⾏  npm install webpack --save-dev　下载webpack　
因为使⽤的webpack版本是4+的，所以还需要安装webpack脚⼿架，执⾏  npm install webpack-cli --save-dev
3、搭建项⽬⽬录
我把webpack 的配置⽂件拆分成了三个⽂件，分别是 webpackmon.js 公⽤⽂件，webpack.dev.js 搭建开发环境时配置，webpack.prod.js 搭建⽣产环境配置
4、需要下载的依赖模块使⽤npm install 模块名 --save-dev下载需要的模块或者简写(npm i 模块名 -D)
a.　clean-webpack-plugin
b.　html-webpack-plugin
c.    vue-laoder
d.    vue-style-loader
e.    vue-template-compiler
f.    style-laoder
g.    css-laoder
h.    url-loader
i.    file-loader
j.    webpack-merge
k.    webpack-dev-server
l.    babel-loader
m.  babel-core
n.    babel-preset-env
o.    babel-preset-react
p.    babel-runtime
q.    vue
下载完成的模块可以在webpack.json ⽂件中查看
5、书写公⽤模块 webpackmon.js ⽂件
/
/ 这是公⽤模块
const path = require('path') // node核⼼模块需要了解的==>(deapp/path.html)
const CleanWebpackPlugin = require('clean-webpack-plugin') // webpack插件清除打包⽂件夹下多余⽂件详细配置==>(www.npmjs/package/clean-webpack-plugin) const HtmlWebpackPlugin = require('html-webpack-plugin') // webpack插件简化html创建详细配置==>(github/jantimon/html-webpack-plugin)
const VueLoaderPlugin = require('vue-loader/lib/plugin') // vue-loader 插件，它的职责是将你定义过的其它规则复制并应⽤到 .vue ⽂件⾥相应语⾔的块
entry: { // webpack ⼊⼝配置
app: './src/main.js'
},
module: { // loader 配置
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}, {
test: /\.vue$/,
use: ['vue-loader']
}, {
test: /\.(png|jpg|jpeg|gif)$/,
use: [{ // url-laoder配置了解详细==>(blog.csdn/qq20004604/article/details/78745994)
loader: 'url-loader',
options: {
limit: 10000,
name: '[name].[ext]',
outputPath: 'assets/img',
publicPath: ''
}
}]
}, {
test: /\.js$/,
use: [{
loader: 'babel-loader',
options: {
presets: ['react', 'env']
}
}],
include: [
]
}, {
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['url-loader']
}]
},
plugins: [ // 插件配置
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
template: 'index.html',
filename: 'index.html'
}),
webpack打包流程 面试new VueLoaderPlugin()
],
output: { // webpack 出⼝配置
filename: '[name].js',
path: solve(__dirname, 'dist')
},
resolve: { // ** 引⼊vue⽂件时需要更改vue⽂件指向 ** 对这⾥有疑问的可以去看看 node_modules/vue/dist/README.md ⾥⾯的这个⽂件有说明        alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': 'src'
}
}
}
6、书写开发环境配置 webpack.dev.js ⽂件
// 开发环境配置
const merge = require('webpack-merge') // webpack 合并配置插件详细了解==>(github/survivejs/webpack-merge)
const common = require('./webpackmon.js') // 引⼊公共模块配置
const webpack = require('webpack') // 引⼊webpack
devtool: 'cheap-module-eval-source-map', // 控制如何⽣成 source map ==>(www.webpackjs/configuration/devtool/)
devServer: {
contentBase: './dist',
hot: true
},
mode: 'development',
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
})
7、在⼊⼝⽂件添加⼀些简单的代码
打开 index.html ⽂件
然后打开 main.js ⽂件
最后再打开 App.vue ⽂件
8、现在想要运⾏项⽬还需要配置⼀个地⽅
在package.json ⽂件添加⼀条 script命令
"start": "webpack-dev-server --config webpack.dev.js"
如果运⾏报错⾸先看报的是什么错，⼀般是模块没有下载，语法错误，然后就是写错字了
没有错误的话，浏览器打开localhost:8080 就会看到 hello Vue 的字样
9、配置⽣产环境打开webpack.prod.js
// 配置⽣产环境
const merge = require('webpack-merge')
const common = require('./webpackmon.js')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); // webpack 插件==>(www.webpackjs/plugins/uglifyjs-webpack-plugin/) ports = merge(common, {
mode: 'production',
plugins: [
new UglifyJSPlugin()
]
})
10、然后再在package.json ⽂件添加script指令
最后运⾏npm run build就会在项⽬⽂件夹下多⼀个 dist的⽂件夹
11、总结
遇到报错不要怕，报错是正常，针对报错进⾏修改。
对webpack 的⼀些配置有疑问的可以去看看官⽹ ==> (www.webpackjs/configuration/)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。