十分鐘上手webpack打包配置

時間  2019-12-08
標籤 十分 10分 上手 webpack 打包 配置 简体版
原文   原文鏈接

webpack究竟是幹什麼的

  webpack其實就是一個打包工具。它能夠將各類當下主流的sass，less，tsx,vue,jsx,json甚至png,svg等各類格式的文件轉化爲瀏覽器能夠識別的html，css，js和圖片資源文件。將他們按照各類依賴關係，整合在一塊兒，輸出到一個bundle文件中。javascript

1、建立package.json

  webpack首先本地建立一個webpack-test文件夾，而後打開命令提示符，進入此目錄，執行命令npm init（npm是node.js自帶的一個包管理工具，安裝node.js就會自動安裝npm）。css

如上圖所示，執行了命令以後，它會讓你寫一些信息，你能夠寫，也能夠直接使用enter鍵下一步，使用默認值。最後一句yes以後，就會在webpack-test目錄下生成一個package.json的文件。以下圖：
`文件初始默認內容`
這個文件的做用是方便項目轉移，這個文件裏面會記錄不少項目依賴項（後面會有解釋），以及以什麼方式打開項目的腳本scripts。

2、安裝wepack模塊

  用來記錄項目操做流程的package文件有了以後，就要進入正題了，若是以前沒有退命令行的webpack-test目錄的話，執行命令html

npm install --save-dev webpack webpack-cli --registry=https://registry.npm.taobao.orgvue

（--registry=https://registry.npm.taobao.org)java

這個配置是爲了解決國內用戶下載npm模塊速度慢，以及有時候會下載失敗的可能 安裝webpack和webpack-cli（這兩個插件缺一不可，webpack是打包工具，webpack-cli是處理打包命令的webpack自帶的方便用戶的腳手架） 執行命令成功以後的效果:node

這時候目錄下會增長一個packjson-lock.json文件和一個node_modules目錄（node_modules目錄是存放npm模塊的目錄，從npm install的全部模塊都自動放在這個目錄中，咱們上面下載的webpack，和webpack-cli也在這裏面

3、建立資源目錄src

index.js文件

import './styles.css';
  
 function component() {
   var element = document.createElement('div');

   var button = document.createElement('button');
   var br = document.createElement('br');
   console.log(_.join(['Hello1', 'providePlugin'], ' '));
   button.innerHTML = 'Click me1 lok at the console!';
   element.appendChild(br);
   element.appendChild(button);

   //懶加載，第一次打開頁面的時候不會去加載對應的js資源文件，當觸發事件的時候纔去加載資源文件
   // webpackChunkName 這個註釋的做用是命名懶加載的資源文件，不然會按照數字遞增命名
   button.onclick = e => import(/* webpackChunkName: "math" */ './math').then(module => {

     var print = module.default;
     print();

   });

  return element;
 }
 document.body.appendChild(component());

複製代碼

main.js

console.log(
    'The print.js module has loaded! See the network tab in dev tools...'
);

export function square(x) {
    return x * x;
}
  
export function cube(x) {
    return x * x * x;
}
export default () => {
    console.log('Button Clicked: Here\'s "some text"!');
}

複製代碼

styles.css文件

body{
   background-color: aquamarine
}
複製代碼

目錄截圖：webpack

​ 接下來咱們經過配置webpack配置文件，而後讓index文件裏面的內容顯示在瀏覽器上。看到這裏，你可能有個疑問：這個目錄下面連個html文件都沒有，它怎麼顯示到瀏覽器上面？假如你看過官網的教程或者其餘社區中的一些一步一步的webpac教程，這個文件夾裏面一開始確實是有html文件的，可是咱們這裏是10分鐘快速上手，就省略了，緣由後面的標題會講。web

4、webpack配置文件

1. webpack-test根目錄下增長三個文件

webpack.common.js

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
    entry: {
        index: './src/index.js'
    },
    output: {
        filename: '[name].[hash].js',
        path: path.resolve(__dirname, 'dist'),
        // publicPath:'/' //這個路徑會用於出口的html文件引入關聯文件的路徑
    },
    optimization: {
        // 提取公用代碼塊，優化打包大小必備
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: "commons",//公用代碼塊名稱
                    chunks: "initial",
                    minChunks: 1
                }
            }
        }
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Production'
        }),
        new webpack.ProvidePlugin({
            _: 'lodash' //全局變量整個lodash
            // join: ['lodash', 'join'] //全局join 所有用lodash裏面的join方法
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: ['file-loader']
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: ['file-loader']
            }      
        ]
    }
};

複製代碼

webpack.dev.js

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

 module.exports =env => {
  // Use env.<YOUR VARIABLE> here:
  console.log('來了') // 'local'
  console.log('Production: ') // true

  return  merge(common, {
    mode:'development',
    devtool: 'inline-source-map',//開啓這個能夠在開發環境中調試代碼 
    devServer: {
     contentBase: "./dist",
     compress: true,
     port: 3000,
     hot:true
    },
    plugins:[
       new webpack.NamedModulesPlugin(),
       new webpack.HotModuleReplacementPlugin()//這兩個插件用於開發環境時，修改保存代碼以後頁面自動刷新
    ]
  });
}

複製代碼

webpack.prod.js

const common = require('./webpack.common.js');
 const merge = require('webpack-merge');
 // const UglifyJsPlugin =require('uglifyjs-webpack-plugin');
 module.exports = merge(common, {
     devtool: 'source-map',//開啓這個能夠在生產環境中調試代碼
    // plugins:[
    // new UglifyJsPlugin({ //嘗試了一下代碼壓縮，可是會報錯尚未找到緣由
    // sourceMap: false
    // })
    // ],
     mode:'production'
 });

複製代碼

2.而後在package.json文件裏面增長兩個scripts

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

複製代碼

此時package.json的完整內容是:npm

{
  "name": "wbpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.prod.js",
    "start": "webpack-dev-server --open --config webpack.dev.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.34.0",
    "webpack-cli": "^3.3.4"
  }
}

複製代碼

5、開始打包

通過前面這麼多的鋪墊，終於到了咱們的最主要的打包環節，話很少說，直接開始。json

仍是用命令提示符進入到webpack-test目錄，而後運行命令:

npm run build
複製代碼

(這個命令會告訴webpack打包工具去執行package.json裏面的scripts對象的build的腳本，也就是說實際執行的是webpack --config webpack.prod.js) 。

這個命令還有一個問題就是 –config webpack.prod.js，爲什麼會有這個選項呢，這是由於webpack打包工具會使用webpack.config.js這個文件看成默認配置文件，咱們若是不想使用這個默認配置文件，可使用--config這個配置，更改webpack的配置項文件。

下面是運行效果:

​ 這麼一長串東西，一看就是報錯，爲何會報錯呢，是由於代碼裏面的一些依賴項模塊沒有安裝，因此下面咱們來安裝好咱們配置項和代碼裏面各類依賴。

檢查了一下代碼和配置項文件，發現缺乏的模塊，而後咱們執行腳本安裝它們

install --registry=https://registry.npm.taobao.org --save-dev clean-webpack-plugin html-webpack-plugin css-loader file-loader style-loader webpack-merge

上面這段腳本含有-dev因此會安裝到package.json文件的devDependencies屬性中

而下面這段腳本會安裝到dependencies屬性中

install --registry=https://registry.npm.taobao.org --save lodash

​ 安裝完以後的package.json文件如今是這樣的:

devDependencie和 dependencies 的區別

​ 使用 --save-dev 安裝的 插件，被寫入到 package.json 文件的devDependencies 域裏面去，而使用 --save 安裝的插件，則是被寫入dependencies 區塊裏面去。devDependencies 裏面的插件只用於開發環境，不用於生產環境，dependencies 是須要發佈到生產環境的。

​ 好比咱們寫一個項目要依賴於jQuery，沒有這個包的依賴運行就會報錯，這時候就把這個依賴寫入dependencies ；而咱們使用的一些構建工具好比glup、webpack這些只是在開發中使用的包，上線之後就和他們不要緊了，因此將它寫入devDependencies。

這時候再運行命令npm run build

能夠看到打包成功了，目錄下也多出了打包以後的dist文件夾

最後測試效果：

file:///D:/wbpack-test/dist/index.html
複製代碼

6、多文件入口打包

首先在src文件夾下面新增一個printf.js文件

printf.js

console.log(
    'The print.js module has loaded! See the network tab in dev tools...'
);

複製代碼

webpack.common.js

entry: {
     index: './src/index.js',
     print:'./src/print.js'
 },
 output: {
     filename: '[name].[hash].js',
     path: path.resolve(__dirname, 'dist'),
     // publicPath:'/' //這個路徑會用於出口的html文件引入關聯文件的路勁
 },

複製代碼

最後運行打包命令：

npm run build

能夠看出，print.js也已經輸出到dist文件夾了。

插件解釋

clean-webpack-plugin這個插件用來清除生成目錄的緩存文件。

html-webpack-plugin這個插件用來生成入口html文件，在這個html裏面自動添加依賴。

Webpack-merge這個是用來合併webpack配置文件的，爲何不適用object.assign呢？由於object.assign這個不能深拷貝。

Webpack.NameModulesPlugin和webpack.HotModuleReplacementPlugin這兩個插件一塊兒使用於開發環境，修改保存代碼以後自動刷新頁面

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程