新建文件夹 webpack-vue

安装依赖

yarn init  //初始化package.jsonyarn add webpack webpack-cli   //添加webpack、webpack-cli//ps:不知那个版本开始就需要安装webpack-cli了

新建index.html

// index.html    
        
        
            
    
    

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

// src/index.jsconsole.log('hello webpack v4');

第一次打包

//终端webpack

你会发现目录底下多了dist文件夹里面有main.js，打开index.html 可以看到console里已经打印出了hello webpack v4,

在终端会有一个警告提示，大致意思是 没有设置mode将会使用生产模式，需要指定开发环境或者生产环境，打开dist/main.js，发现js确实是被压缩过的

//consolehello 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

//修改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
    

修改index.js

import Vue from 'vue'import App from './pages/app.vue'new Vue({    el:"#root",    render:h=>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.jsmodule.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.jsconst 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

//终端yarn build

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

处理图片

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

//app.vue
    

//终端yarn start

//报错./src/img/1.jpgModule 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    }