从零开始的 webpack4 + vue2.x

新建文件夹 webpack-vue

安装依赖



yarn init  //初始化package.json

yarn add webpack webpack-cli   //添加webpack、webpack-cli

//ps:不知那个版本开始就需要安装webpack-cli了

新建index.html



// index.html

&lt;!DOCTYPE html&gt;

&lt;html lang="en"&gt;

&lt;head&gt;

    &lt;meta charset="UTF-8"&gt;

    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;

    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;

    &lt;title&gt;webpack v4&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;

    &lt;div id="root"&gt;&lt;/div&gt;

    &lt;script src="dist/main.js"&gt;&lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;

新建文件夹src，在src下新建index.js



// src/index.js

console.log('hello webpack v4');

第一次打包



//终端

webpack

你会发现目录底下多了dist文件夹里面有main.js，打开index.html 可以看到console里已经打印出了hello webpack v4,
在终端会有一个警告提示，大致意思是没有设置mode将会使用生产模式，需要指定开发环境或者生产环境，打开dist/main.js，发现js确实是被压缩过的



//console

hello webpack v4

package.json



//package.json

...

"scripts":{

    "start":"--mode development",

    "build": "--mode production"

 }

...

第二次打包



yarn start   //开发环境

yarn build   //生产环境（压缩）

webpack-dev-server

手动打开浏览器太麻烦



//终端

yarn add webpack-dev-server   //添加webpack-dev-server



//修改index.html

&lt;script src="main.js"&gt;&lt;/script&gt;



//修改package.json

...

"scripts": {

    "start": "webpack-dev-server --mode development --open",

    "build": "webpack --mode production"

  }

...

第三次打包



yarn start



自动打开浏览器了，

修改index.js试试

加入Vue

我们将一个一个解决问题，不会一次安装所有依赖



yarn add vue  //添加依赖

在src下面新建文件夹pages,在pages里面新建app.vue文件



//app.vue

&lt;template&gt;

    &lt;section class="main"&gt;

        &lt;p&gt;我来了{{name}}&lt;/p&gt;

    &lt;/section&gt;

&lt;/template&gt;

&lt;script&gt;

export default {

    data () {

        return {

            name:"vue + webpack"

        }

    }

}

&lt;/script&gt;

&lt;style&gt;

.main&gt;p{

    color: #000;

}

&lt;/style&gt;

修改index.js



import Vue from 'vue'

import App from './pages/app.vue'

new Vue({

    el:"#root",

    render:h=&gt;h(App)

})



//终端

yarn start

这时候可预见的报错来了，



Uncaught Error: Module parse failed: Unexpected token (1:0)

You may need an appropriate loader to handle this file type.

//翻译：模块解析失败，您可能需要一个适当的加载程序来处理这个文件类型

看报错，我们一个个解决
搜索关键词，很容易发现是没有安装vue-loader,新建webpack.config.js



//webpack.config.js

module.exports = {

    module:{

        rules:[

            {test:/\.vue$/,use:'vue-loader'}

        ]

    }

}

vue-loader在15之后需要在webpack.config.js中当插件引入



const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {

  // ...

  plugins: [

    new VueLoaderPlugin()

  ]

}



//终端

yarn start

再次报错



Uncaught Error: Module build failed: Error: Cannot find module 'vue-template-compiler'

...

很明显，要你安装vue-template-compiler



yarn add vue-template-compiler



//终端

yarn start

继续报错



Module not found: Error: Can't resolve 'css-loader'

提示安装css-loader



yarn add css-loader

bingo! webpack4+vue2第一个项目成功运行

从js中分离css

这时候细心的你发现css被塞到head里面，我们来把css分离出来。使用webpack的插件extract-text-webpack-plugin@next



yarn add extract-text-webpack-plugin@next

在webpack.config.js中添加插件



//webpack.config.js

const ExtractTextWebapckPlugin = require('extract-text-webpack-plugin');  //引入插件

module.exports = {

    module:{

        rules:[

            {

                test: /\.vue$/,

                loader: 'vue-loader',

                options: {

                    loaders: {

                        css: ExtractTextWebapckPlugin.extract({ use: 'css-loader' })

                    }

                }

            }

        ]

    },

    plugins:[

        new ExtractTextWebapckPlugin('style.css')

    ]

}

index.html引入css



&lt;!DOCTYPE html&gt;

&lt;html lang="en"&gt;

&lt;head&gt;

    &lt;meta charset="UTF-8"&gt;

    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;

    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;

    &lt;title&gt;webpack v4&lt;/title&gt;

    &lt;link rel="stylesheet" href="style.css"&gt;

&lt;/head&gt;

&lt;body&gt;

    &lt;div id="root"&gt;&lt;/div&gt;

    &lt;script src="main.js"&gt;&lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;



//终端

yarn build

打包完成后dist目录里面出现了main.js和style.css

处理图片

新建文件夹img,用来放图片



//app.vue

&lt;template&gt;

    &lt;section class="main"&gt;

        &lt;p&gt;我来了{{name}}&lt;/p&gt;

        &lt;img src="../img/1.jpg" alt=""&gt;

    &lt;/section&gt;

&lt;/template&gt;

&lt;script&gt;

export default {

    data () {

        return {

            name:"vue + webpack"

        }

    }

}

&lt;/script&gt;

&lt;style&gt;

.main&gt;p{

    color: #000;

}

&lt;/style&gt;



//终端

yarn start



//报错

./src/img/1.jpg

Module parse failed: Unexpected character '�' (1:0)

You may need an appropriate loader to handle this file type.

基本可以看出来是图片有问题，没有loader处理图片

file-loader与url-loader



yarn add file-loader url-loader

修改webpack.config.js



//webpack.config.js

...

rule:[

    ...

    {

        test: /\.(png|jpg|gif)$/,

        use: [{ loader: 'url-loader',options: { limit: 8192 } }]

    }

    ...

]

...



yarn start

打包成功...

webpack其余一些配置

resolve，watchOptions，devServer



//webpack.config.js

    resolve: {  //导入的时候不用写拓展名

        extensions: [' ', '.js', '.json', '.vue', '.scss', '.css']

    },

    watchOptions: {

        ignored: /node_modules/,

        aggregateTimeout: 300,//防止重复保存频繁重新编译,300ms内重复保存不打包

        poll: 1000  //每秒询问的文件变更的次数

    },

    devServer:{

        inline: true,

        compress: true,

        host: '127.0.0.1',

        port: 2500,

        historyApiFallback: true

    }

原文地址：https://segmentfault.com/a/1190000014251654