使用webpack4 从0到1构建一个vue 单页项目
- mkdir vue-webpack-101
- cd vue-webpack-101
- npm init (都懂 就不介绍了)
- touch .gitignore (都懂 就不介绍了)
-
Yarn add webpack vue vue-loader 根据包与包之间的依赖关系提示 继续安装其他包 这里就不一一列出,后面会给完整的package.json,前期只需要 webpack vue vue-loader 这三个相关包就可以跑起来一个示例demo。
-
配置 script
"scripts": {
"build": "webpack --config webpack.config.js"
}
为什么要在这里面调用webpack而不是在终端里面直接运行呢?因为只有在这里调用webpack,它才会优先调用我们项目里面安装的webpack版本,如果我们在命令行里面输入webpack,它会调动全局的webpack,这个时候全局的webpack可能会跟我们项目中的webpack版本不一致,所以我们还是采取这种方式比较稳妥。
- vue-webpack-101
- src
- app.vue
- index.js (入口文件)
- package.json
- .gitignore
- node_modules
- src
<template>
<div id="test">{{test}}</div>
</template>
<script>
export default {
data() {
return {
text: 'abc',
}
}
}
</script>
<style>
#test {
color: brown;
}
</style>
import Vue from "vue";
import App from "./app.vue";
const root = document.createElement('div');
document.body.appendChild(root);
new Vue({
render: (h) => h(App)
}).$mount(root)
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader'); //*1 这里
module.exports = {
entry: path.join(__dirname, 'src/index.js'),
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
new VueLoaderPlugin() //*1 这里
]
}
1 引入VueLoaderPlugin解决了问题如图
vue-loader
// this will apply to both plain .css files
// AND <style> blocks in vue files
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
entry: path.join(__dirname, 'src/index.js'),
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
mode: 'development',
至此,npm run build 终于跑起来了
npm install --save-dev webpack-dev-server
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.join(__dirname, 'src/index.js'),
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
resolve: {
extensions: [".js", ".json", ".css", '.vue']
},
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
port: 9000
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
// this will apply to both plain .js files
// AND <script> blocks in vue files
{
test: /\.js$/,
loader: 'babel-loader'
},
// this will apply to both plain .css files
// AND <style> blocks in vue files
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: path.join(__dirname, 'index.html'), // 模板文件
inject: 'body' // js的script注入到body底部
})
]
}
"scripts": {
"dev": "webpack-dev-server --config webpack.config.js"
}
完结散花
TODO
- 资源优化