共计 2670 个字符，预计需要花费 7 分钟才能阅读完成。
mkdir webpacktest
cd webpacktest
npm init -y
目录下生成一个 package.json 文件，内容如下：
{
“name”: “webpacktest”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
"test": "echo \"Error: no test specified\"&& exit 1"},
“keywords”: [],
“author”: “”,
“license”: “ISC”
}
安装 webpack 及 webpack-cli
npm install webpack webpack-cli –save-dev
{
“name”: “webpacktest”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
"test": "echo \"Error: no test specified\"&& exit 1"},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“devDependencies”: {
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6"}
}
项目根目录下添加 webpack.config.js 并配置，新建文件夹 src 和 index.js
webpack.config.js:
const path = require(‘path’);
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}}
{
“name”: “webpacktest”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
"start": "webpack",
"test": "echo \"Error: no test specified\"&& exit 1"},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“devDependencies”: {
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6"}
}
安装 vue-loader
npm install vue-loader vue-template-compiler –save-dev
{
“name”: “webpacktest”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
"start": "webpack --debug",
"test": "echo \"Error: no test specified\"&& exit 1"},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“devDependencies”: {
"vue-loader": "^15.7.1",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6"}
}
新建 example.vue 文件，添加内容：
<template>
<div class=”example”>{{msg}}</div>
</template>
<script>
export default {
data () {
return {msg: 'Hello world!'}}
}
</script>
index.js:
import example from ‘./example.vue’
执行：npm run start
在 example.vue 文件中天健 style 部分
<template>
<div class=”example”>{{msg}}</div>
</template>
<script>
export default {
data () {
return {msg: 'Hello world!'}}
}
</script>
<style >
.example {
color: red;
}
</style>
package.json:
{
“name”: “webpacktest”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
"start": "webpack --debug",
"test": "echo \"Error: no test specified\"&& exit 1"},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“devDependencies”: {
"css-loader": "^3.2.0",
"vue-loader": "^15.7.1",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6"},
“dependencies”: {
"vue": "^2.6.10"}
}
webpack.config.js:
const path = require(‘path’);
const VueLoaderPlugin = require(‘vue-loader/lib/plugin’)
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
// ... 其它规则
{
test: /\.vue$/,
loader: 'vue-loader'
},
// 它会应用到普通的 `.css` 文件
// 以及 `.vue` 文件中的 `<style>` 块
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
plugins: [
// 请确保引入这个插件！new VueLoaderPlugin()],
resolve:{extensions:['.vue','.js'],
alias:{'vue$': 'vue/dist/vue.esm.js'}
}}
