学习webpack创建vue项目1 vue-loader vue-style-loader css-loader

创建文件夹

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
安装完，package.json增加了devDependencies字段，包含刚才安装的webpack和webpack-cli

{
  "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')
    }
}

package.json增加start字段

{
  "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"
  }
}

运行webpack

npm run start

可以看到打包成功，项目根目录下出现了dist文件夹，里面有打包好的main.js文件

安装vue-loader和vue-template-compiler

npm install vue-loader vue-template-compiler --save-dev

注意vue-template-compiler一定要安装，这是vue-loader默认调用的模板编译器，也可以安装其他的template compiler，但是要配置vue-loader

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": {
    "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'

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'
            }
        ]
    },
    plugins: [
        // 请确保引入这个插件！
        new VueLoaderPlugin()
    ],
    resolve:{
        extensions:['.vue','.js'],
        alias:{
            'vue$': 'vue/dist/vue.esm.js'
        }
    }
}

执行：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>

安装vue-style-loader和css-loader, 并在webpack.config.js中配置vue-style-loader和css-loader

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

执行：npm run start

注意： webpack.config.js中的resolve字段一定要配置extensions，有些库里写import xxx from xxx没有带后缀.js，如果不配置可能resolve不到。

vue-loader处理.vue文件，vue-style-loader同style-loader,将css-loader处理完的style属性加到DOM上。