造輪子--webpack4&vue2

時間 2020-06-11

標籤輪子 webpack4&vue2 webpack vue 简体版

原文原文鏈接

初始化

咱們使用npm init命令初始化一個package.json文件。html

npm init

安裝webpack

npm i webpack webpack-cli webpack-dev-server --save-dev

安裝vue

npm i vue --save

建立相應文件

createVue
  |--dist
  |--webpack.config.js
  |--src
      |--main.js
  |--index.html

===index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack4-vue-demo</title>
</head>
<body>
    <div id="app"></div>
    <script src="./dist/bundle.js"></script>
</body>
</html>

====main.js
import Vue from 'vue';

new Vue({
    el: '#app',
    data: {
        message: "hello"
    }
});

===webpack.config.js
const webpack = require('webpack');

module.exports = {
  entry: './src/main.js', //入口
  output:{
      path: path.resolve(__dirname, 'dist'),
      filename: "bundle.js"
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src')
    }
  }
};

打包

webpack

打包事後，dist文件夾出現打包後的文件，再經過IDEA打開index.html，就能夠看到內容。vue

打開index.html後，控制檯報錯node

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

解決方法：webpack

resolve: {
    alias: {
       'vue$': 'vue/dist/vue.esm.js'
    }
 }

改形成vue文件

createVue
  |--dist
  |--webpack.config.js
  |--src
      |--main.js
      |--App.vue
  |--index.html

====main.js
import Vue from 'vue';
import App from './APP';

new Vue({
    el: '#app',
    render:h=>h(App)
});

====App.vue
<template>
  <div id="app">
    hello world
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

若是直接運行，發現報錯。
解決方案：es6

npm install -D vue-loader vue-template-compiler

請在webpack.config.js添加以下：web

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

module.exports = {
  module: {
    rules: [
      // ... 其它規則
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 請確保引入這個插件！
    new VueLoaderPlugin()
  ]
}

自動注入

將打包後的文件自動注入index.html。vue-router

npm install --save-dev html-webpack-plugin

將index.html頁面中的"<script src="./dist/bundle.js"></script>" 刪除。
在webpack.config.js 中增長以下配置：npm

const HtmlWebpackPlugin = require('html-webpack-plugin')
...

plugins:[
     new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: 'body',
            favicon: 'favicon.ico',
            minify: {
                removeAttributeQuotes: true // 移除屬性的引號
            }
        })
]

運行"npm build", 生成的index.html中自動注入打包好的js文件。json

改造webpack.config.js

npm i webpack-merge --save-dev

新建兩個文件，webpack.prod.js和webpack.dev.js。瀏覽器

createVue
  |--dist
  |--webpack.config.js
  |--webpack.dev.js
  |--webpack.prod.js
  |--src
      |--main.js
      |--App.vue
  |--index.html

======= webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.config.js');
const path = require('path');

module.exports = merge(common, {
  devtool: 'inline-source-map',
  devServer: { // 開發服務器
    contentBase: './dist'    //告訴開發服務器(dev server)，在哪裏查找文件
  },
  output: { // 輸出
    filename: 'js/[name].[hash].js',  // 每次保存 hash 都變化
    path: path.resolve(__dirname, './dist')
  },
  module: {},
  mode: 'development',
});

======= webpack.prod.js
const path = require('path');
// 合併配置文件
const merge = require('webpack-merge');
const common = require('./webpack.config.js');

module.exports = merge(common, {
  module: {},
  plugins: [],
  mode: 'production',
  output: {
    filename: 'js/[name].[chunkhash].js', 
    path: path.resolve(__dirname, './dist')
  },
});

接下來，在package.json的scripts 配置中添加運行腳本:

"scripts": {
  "start": "webpack-dev-server --open --config webpack.dev.js",
  "build": "webpack --config webpack.prod.js"
},

當咱們打包的時候webpack4會報錯

The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

解決方法：

"scripts": {
  "start": "webpack-dev-server --mode=development --open --config webpack.dev.js",
  "build": "webpack --mode=production --config webpack.prod.js"
},

熱替換

在webpack.dev.js 中增長以下配置：

devServer: {
  hot: true
},
plugins: [
  new webpack.NamedModulesPlugin(),
  new webpack.HotModuleReplacementPlugin()
],

壓縮js

npm i -D uglifyjs-webpack-plugin

請在webpack.prod.js添加以下配置：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  plugins: [
    new UglifyJsPlugin()
  ]
}

清理 /dist 文件夾

npm install clean-webpack-plugin --save-dev

請在webpack.prod.js添加以下配置：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  plugins: [
    new CleanWebpackPlugin(['dist'])
  ]
}

引入babel

複製代碼因爲在使用vue時會用到不少es6的語法，可是如今不少瀏覽器對es6的支持不是很好，因此在編譯時須要將這些語法轉換es5的語法，此時咱們使用babel來進行編譯。

npm install --save-dev babel-core babel-loader babel-preset-env babel-plugin-transform-runtime

babel-loader 用於讓 webpack 知道如何運行 babel
babel-core 能夠看作編譯器，這個庫知道如何解析代碼
babel-preset-env 這個庫能夠根據環境的不一樣轉換代碼

請在webpack.config.js添加以下配置：

module:{
    rules:[
        {
            test: /\.js$/,
            loader:"babel-loader",
            exclude: /node_modules/
        }
    ]
}

目錄下建立.babelrc文件用於配置 babel ：

{
  "presets": ["env"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

IE下報Promise未定義錯誤解決方法：

npm install babel-polyfill --save

在main.ts中 import "babel-polyfill";

Babel 默認只轉換新的 JavaScript 句法（syntax），而不轉換新的 API，若是想讓這個方法運行，必須使用babel-polyfill，爲當前環境提供一個墊片。

引入vue-router

npm install --save vue-router

添加 src/router/routes.js 文件，用於配置項目路由：

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
  routes: [
    { path: '', component: () => import ('@/views/Home')}
  ]
});

新建立文件以下：

createVue
  |--dist
  |--webpack.config.js
  |--webpack.dev.js
  |--webpack.prod.js
  |--src
      |--views
        |--Home.vue
      |--router
        |--routes.js
      |--main.js
      |--App.vue
  |--index.html

運行npm start，發現報錯了！！！

注意
若是您使用的是 Babel，你將須要添加 syntax-dynamic-import 插件，才能使 Babel 能夠正確地解析語法。
找了很久，才發現，原來還須要裝這個插件~~~哭.jpg

npm install --save-dev @babel/plugin-syntax-dynamic-import

// .babelrc
{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

到這兒，完成了基本的框架，剩下的能夠看本身的項目須要進行選擇了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。