webpack4.x的使用曆程

標籤：runtime   cal   運用   http   產生   stage   resolve   es6   package   

第一次接觸的webpack是在一個3.x的資料中 在4.x的運用中遇到了好多的坑，我就以小白的身份把我使用webpaxk的過程分享出來，其中很多不足歡迎大佬們指正

 node安裝不再贅述

一．安裝

1. npm i webpack –D（在項目中安裝）"webpack": "^4.16.5"
2. npm install webpack-cli –g  4.x之後要單獨安裝
3. webpack --mode development 會自動產生一個dist檔案夾並在下面產生main.js儲存打包好的js檔案

注意:index.js要在src檔案夾在webpack預設從src檔案夾下擷取，不再支援 webpack a.js   b.js這種方式(打包的入口檔案是‘./src/index.js‘，輸出路徑是‘./dist/main.js‘)

二．初始化

npm init –y（執行預設配置） -----會產生一個package.json的檔案。

三. 安裝loader

*css: css-loader, css-loader;

*css中的url: url-loader(use:‘url-loader?limit=??(圖片大小的位元組數)‘), file-loader;

*字型表徵圖：{test:/\.(ttf|eot|svg|woff|woff2)$/, use: "url-loader"},

*es6中的進階文法轉換：
1.安裝loader:
(1)npm i babel-core babel-loader babel-plugin-transform-runtime -D
(2)npm i babel-preset-env babel-preset-stage-0 -D
2.配置webpack

{test:/\.js$/, use: "babel-loader",exclude:/node_modules/}

3.配置babelrc
在src下建立.babelrc檔案並設定

{"presets": ["env","stage-0"],"plugins": ["transform-runtime"]}

四. vue中webpack的使用

1.安裝vue的包 npm i vue -S

2.loader npm i vue-loader vue-template-compiler -D

3.建立一個vue檔案並引入
import Vue from ‘vue‘;預設引用的是vue/joson裡配置的vue檔案是不全的 需要用到rende

import login from ‘./login.vue‘render: function (createElement) {return createElement(login)}//向掛載的元素中直接覆蓋一個名為login的組件  簡寫render:  c=>c(login)

五. webpack.config.js的配置

 

const webpack = require("webpack");const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);const path = require("path");const VueLoaderPlugin = require(‘vue-loader/lib/plugin‘);const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);module.exports ={    mode: ‘development‘,    entry: {        index: "./src/index.js",        hw9:"./src/hw9.js"    },    output: {        filename: "js/[name]-[hash].js",        path: path.join(__dirname, "dist")    },    module: { // 處理對應模組        rules: [            {                test: /\.css$/,                use: [ ‘style-loader‘, ‘css-loader‘, ]//處理css            },            {test:/\.js$/, use: "babel-loader",exclude:/node_modules/},//es6            {test:/\.(jpg|png|gif|bmp|jpeg|webp|dpg)$/, use: "url-loader?limit=1079"},            {test:/\.(ttf|eot|svg|woff|woff2)$/, use: "url-loader"},            {test:/\.js$/, use: "babel-loader",exclude:/node_modules/},            {test:/\.vue$/, use: "vue-loader"}        ]    },    plugins: [        new webpack.HotModuleReplacementPlugin(),        new VueLoaderPlugin(),        new HtmlWebpackPlugin({  // Also generate a test.html            filename : ‘index.html‘,            chunks : [‘index‘],            template: ‘src/index.html‘        }),        new HtmlWebpackPlugin({  // Also generate a test.html            filename : ‘hw9.html‘,            chunks : [‘hw9‘],            template: ‘src/hw9.html‘        }),       new CleanWebpackPlugin(            [‘dist/!*‘, ‘dist/!*‘,],　     //匹配刪除的檔案            {                root: __dirname,       　　　　　　　　　　//根目錄                verbose: true,        　　　　　　　　　　//開啟在控制台輸出資訊                dry: false        　　　　　　　　　　//啟用刪除檔案            }        )    ],    devServer: {//配置此靜態檔案伺服器，可以用來預覽打包後項目        inline:true,//打包後加入一個websocket用戶端        hot:true,//熱載入        contentBase: path.resolve(__dirname, ‘dist‘),//開發服務運行時的檔案根目錄        host: ‘localhost‘,//主機地址        port: 8080,//連接埠號碼        compress: true//程式開發伺服器是否啟動gzip等壓縮    },};

 

 

 

六. 其他詳細請參考webpack 官方文檔

https://webpack.github.io

https://www.webpackjs.com

webpack4.x的使用曆程