学习webpack创建vue项目

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'
    }
}

}