webpack4基本配置

時間 2019-11-09

標籤 webpack4 webpack 基本配置简体版

原文原文鏈接

一、npm init

　　生成package.json文件

二、npm install webpack webpack-cil --save-dev

　　安裝webpack和webpack-cli

三、新建一個src文件夾，裏面建立index.js文件

console.log(123);

　　webpack會自動查找src下的index.js文件，將它打包到dist文件夾裏，默認生成main.js，main.js就是打包後的文件

四、修改package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",	// （開發模式）
    "build": "webpack --mode production"	// （生產模式）
 },

　　開發模式生成的文件不壓縮javascript

　　生產模式生成的文件壓縮css

五、運行npm run dev和npm run build

　　此時，根目錄下就會多出dist文件夾，裏面有main.js文件，能夠分別運行這兩個命令，看一下生成的main.js文件的區別

六、以上這些都是默認的，固然這些能夠本身配置

　　新建webpack.config.js文件

const path = require("path")

module.exports = {
    entry: "./src/index.js",    // 入口
    output: {                   // 出口
        filename: "bundle.js",      // 生成打包文件的名字
        path: path.join(__dirname, "dist")  // 打包文件的路徑，__dirname指當前根目錄
    }
}

　　此時運行npm run dev，在dist文件夾下就能看到打包生成的bundle.js文件html

七、以上是單文件入口，那若是是多文件入口吶

　　只需修改webpack.config.js文件

module.exports = {
    entry: {    // 多文件入口
        index: "./src/index.js",
        test: "./src/test.js"
    },
    output: {                   // 出口
        filename: "[name].bundle.js",      // 生成打包文件的名字  ==>注意這裏，由於是多文件入口，全部須要[name]來區分文件
        path: path.join(__dirname, "dist")  // 打包文件的路徑，__dirname指當前根目錄
    }
}

　　運行npm run devjava

　　就能看到打包後的index.bundle.js和test.bundle.js文件，

　　entry也能夠寫成數組的形式

　　　　entry: ["./src/index.js", "./src/test.js"],

　　這個方式和對象形式結果是同樣的。

　　將代碼恢復，刪除掉剛剛生成的index.bundle.js和test.bundle.js文件，以及mian.js文件

八、設置webpack-dev-server

　　安裝 npm install webpack-dev-server --save-dev

　　在webpack.config.js進行配置

 devServer: {
        // 設置基本目錄結構
        contentBase: path.join(__dirname, "dist"),
        // 服務器的ip地址，也可使用localhost
        host: "localhost",
        // 服務端壓縮是否開啓
        compress: true,
        // 配置服務端口號
        port: 8080
    }

　　修改package.json內容爲webpack

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "serve": "webpack-dev-server --mode development",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },

　　運行npm run serveweb

　　成功

九、打包html文件

　　安裝html-webpack-plugin，它可以幫咱們插入script及link標籤

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

　　src下新建index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="main">
        hello
    </div>
</body>
</html>

　　在webpack.config.js中進行配置npm

　　開頭引入插件json

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

　　在plugins配置數組

plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/inde.html',
             // chunks: ['index'],  // 多入口時須要用到
            hash: true      // 插入的文件後面加一段隨機數
        })
    ],

　　運行npm run serve，瀏覽器中打開localhost:8080瀏覽器

　　成功，此時dist文件夾下也有了index.html文件

十、打包css文件

　　在src下新建main.css文件

#main{
    	height: 100px;
    	width: 100px;
    	font-size: 40px;
    	color: #FF6347;
    	background-color: pink; 
}

　　須要安裝css-loader，style-loader

　　npm install css-loader style-loader --save-dev

　　webpack.config.js中配置

module: {
        rules:[
            // css loader
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]   // 這裏順序不能顛倒
            }
        ]
    },

　　在入口文件index.js中引入mian.css文件

　　import main from './main.css'

　　// require('./main.css')

　　這兩種引入方式均可以

　　npm run serve

　　效果有了

十一、使用style-loader會將樣式內嵌到HTML中，可是咱們不但願這樣，咱們想在HTML中經過link標籤的形式引入。

　　使用extract-text-webpack-plugin插件分離css

　　安裝：

　　　　npm install extract-text-webpack-plugin --save-dev

　　webpack.config.dev中配置

new ExtractTextPlugin({
      filename: "index.css",
})

 rules:[
            // css loader
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",  
                    use: "css-loader"
                })
                  
            }
        ]

而後npm run build 打包，結果報錯

　　這是由於extract-text-webpack-plugin目前版本並不支持webpack4

　　因此安裝最新版本

　　　　npm install extract-text-webpack-plugin@next --save-dev

　　再次打包

　　npm run build，成功，此時dist文件夾裏就有了index.css文件

　　此時dist下的html文件中就是經過link的方式引入css的

　　若是在css中引入圖片打包吶

十二、css中引入圖片

　　在src/index.html新加一個div，class爲bg。在src/main.css中添加

.bg{
    	height: 50px;
    	width: 50px;
    	background: url("./img/confirm.png")
 }

　　npm run build 打包

　　報錯

　　這是由於缺乏loader，安裝file-loader和url-loader

　　npm install file-loader url-loader --save-dev

　　配置：

 // 圖片 loader
            {
                test: /\.(png|jpg|gif|jpeg)/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 500   //是把小於500B的文件打成Base64的格式，寫入JS
                    }
                }]
            }

　　npm run build 打包，成功

　　npm run serve 看下

　　有了

　　這裏配置的時候只引用了url-loader，這是由於，url-loader封裝了file-loader

　　url-loader工做分兩種狀況：

　　　　1.文件大小小於limit參數，url-loader將會把文件轉爲DataURL（Base64格式）；

　　　　2.文件大小大於limit，url-loader會調用file-loader進行處理，參數也會直接傳給file-loader。

　　也就是說，其實咱們只安裝一個url-loader就能夠了。可是爲了之後的操做方便，因此順便安裝上file-loader。

1三、html中經過img引入圖片

　　這時候css中引入圖片沒問題，可是在HTML文件中經過img引入圖片，會有問題，打包雖然沒有報錯，可是頁面上並無顯示圖片，控制檯能看到報錯

　　這是由於打包後路徑的問題。

　　使用html-withimg-loader來處理html引入的img圖片

　　安裝：

　　　　npm install html-withimg-loader --save-dev

　　配置

　　　　url-loader中添加

options: {
           limit: 500,   //是把小於500B的文件打成Base64的格式，寫入JS
           outputPath: 'images/'  //打包後的圖片放到images文件夾下
        }

在module中添加

{
            test: /\.(htm|html)$/i,
            use: ["html-withimg-loader"]
        }

　　而後npm run build，成功，可是dist文件夾中並無生成images文件夾，這是由於設置了limit，若是引用的圖片小於500k，url-loader將圖片轉換成base64格式寫入js，引入一張大的試試，再打包

　　能夠看到區別，1.jpg因爲超過400k，因此就被打包到了dist/images中了

1四、使用less

　　安裝less：

　　　　npm install less --save-dev

　　打包須要less-loader，再安裝less-loader：

　　　　npm install less-loader --save-dev

　　配置：

// less loader
       {
           test: /\.less$/,
           use: ["style-loader", "css-loader", "less-loader"]
       }

　　在src文件夾下建立indexless.less文件

@bgColor: #FFA54F;
.my{
    	height: 100px;
    	width: 100px;
    	background-color: @bgColor;
 }

　　對應的在index.html中添加class爲my的div塊

　　npm run serve，瀏覽器中就能看到了

1五、分離出來less文件，像分離css文件同樣

　　其實和分離css文件配置基本是同樣的

 // less loader
            {
                test: /\.less$/,
                
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader", 
                    use: ["css-loader", "less-loader"]
                }), 
                
            }

　　這時候運行npm run build 打包

　　看dist文件夾下生成的index.css文件

　　已經生成

1六、使用sass，配置大體相同

1七、自動添加CSS3屬性前綴

　　安裝插件：

　　　　npm install postcss-loader autoprefixer --save-dev

　　在根目錄下建立postcss.config.js文件

module.exports = {
    	plugins: [
        	require('autoprefixer')  //自動添加前綴插件
    	]
}

webpack.config.js配置

// css loader
       {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                 fallback: "style-loader",  
                 use: ["css-loader", "postcss-loader"]
             })
                  
        },

npm run build打包

看下對比

相關標籤/搜索

每日一句

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