前端實踐項目（一）使用webpack進行打包編譯

目錄

　　該系列的總目錄， https://www.cnblogs.com/shadoll/p/14637373.html

一.創建項目

　　安裝NodeJs，本文演示的NodeJs版本是10.15.3，IDE工具使用VSCode。

　　通過命令行工具，進入你需要創建項目的文件夾中，然后輸入命令npm init，一路回車，顯示結果如圖。

　　最后會在該文件夾中創建package.json文件。

　　main在package.json中就是聲明這個項目的入口文件，一般是哪個需要用node來啟動就寫哪個，寫不寫都不影響項目。

　　在根目錄下的app.js中寫一行代碼。

console.log("正在運行");

　　執行node app.js。

 

 

 二.使用webpack進行打包編譯

　　webpack的基本功能是打包，它會將一堆js、css壓縮到一個js、css文件中。

　　執行命令行，安裝webpack及需要使用的相關包。安裝命令是npm install，這里改用cnpm，使用cnpm要先安裝淘寶鏡像（npm install -g cnpm --registry=https://registry.npm.taobao.org）。@后面指版本號，我用的是webpack3。--save是把安裝記錄在package.json上，-dev是安裝的插件只在開發環境適用。

cnpm install webpack@3.5.1 --save-dev

cnpm install css-loader@0.23.1 --save-dev

cnpm install extract-text-webpack-plugin@3.0.0 --save-dev

　　安裝完成后，package.json如下顯示。

{
  "name": "testproject",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.5.1"
  }
}

　　在根目錄下新建webpack.config.js，這是webpack默認的配置文件。

const ExtractTextPlugin = require("extract-text-webpack-plugin");

var webpackConfig = {
    //插件項
    plugins: [
        new ExtractTextPlugin('css/[name].css')
    ],
    //頁面入口文件配置
    entry: { index: './app/src/index.js', },
    //入口文件輸出配置
    output: {
        path: __dirname + '/dist',
        filename: 'js/[name].js',
        publicPath: '/'
    },
    module: {
        //加載器配置
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    use: 'css-loader'
                })
            }
        ]
    },
};

module.exports = webpackConfig;

　　引用extract-text-webpack-plugin插件是為了可以打包css文件，在webpack中默認是只能打包js文件。entry為入口文件配置，這里配置只有一個index的入口。output是輸入項，最終打包文件的路徑命名的配置，設置為打包到根目錄下的dist文件夾中，js文件在js文件夾，css在css文件夾（上面插件設置了css打包配置）。[name]為入口名字“index”。如果是多個入口，那么最終的打包會是多個文件。

　　在項目中新建文件下列的js和css文件，並在index.js中進行引用。

//index.js

require("./test");
require("./test2");
require("./test.css");

　　最后執行命令webpack。可以發現在index.js中的內容或引用的內容都被打包到dist中的index.js和index.css文件中。

 

 　　查看代碼或自己建個html，直接引用文件，可以發現入口文件index.js的引用都已經執行了。