初步使用webpack4
版本配置
$ node -v v12.19.0
$ webpack --version webpack-cli 4.0.0 webpack 4.16.4
详细过程我写到了底部评论区，记得查看哦！！！🤩🤩🤩🤩🤩
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
//App.js
export default {
template: `
<div>
<ul>
<li v-for = "item in books">{{ item }}</li>
</ul>
</div>
`,
data(){
return {
books: ['超级记忆术','思维风暴','思维导图','UML2软件建模']
}
}
}
//index.js
import Vue from './js/vue'
import App from './App'
new Vue({
el: '#app',
template: '<App/>',
components: {
App
}
})
//webpack.config.js
const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
/**
* webpack的 mode 配置用于提供模式配置选项告诉webpack相应地使用其内置的优化，mode有以下三个可选值
* development
* production
* none
*
*/
mode: "production",
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "index.js"
},
module: {
rules: [ {
test: '/\.js$/',
use: 'bable-loader'
}, {
test: '/\.css$/',
use: [{
loader: 'style-loader'
},
{
loader: 'css-loader',
},
]
}, {
test: '/\.png|jpe?g|svg$/',
use: 'url-loader'
}]
},
plugins: [
//作用：打包.html
// 安装命令：npm instal html-webpack-plugin --save-dev
//version：html-webpack-plugin@4.5.0
new htmlWebpackPlugin({
template: "./src/index.html",
filename: 'index.html', //输出文件的文件名称，默认为index.html，不配置就是该文件名；此外，还可以为输出文件指定目录位置（例如'html/index.html'）
minify: {
minimize: true,
removeConments: true,
collapseWhitespace: true,
minifyCSS: true,
minifyJS: true,
}
})
//可配置多个html
//new htmlWebpackPlugin({ })
// new htmlWebpackPlugin({ })
]
}
//package.json
{
"name": "meetwebpack",
"version": "1.0.0",
"description": "MIT",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"keywords": [],
"author": "BingNiTer",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^4.5.0",
"webpack": "^4.16.4",
"webpack-cli": "^4.0.0"
},
"dependencies": {
}
}
