webpack超詳細配置, 使用教程(圖文)

時間 2019-11-11

標籤 webpack 詳細配置使用教程圖文简体版

原文原文鏈接

webpack超詳細配置, 使用教程(圖文)

博主在這裏就不詳細介紹webpack來源以及做用了, 本篇博文面向新手主要說明如何配置webpack, 以及webpack的使用方法, 直到建立出一個合理的屬於本身webpack項目;css

流程

webpack安裝

Step 1: 首先安裝Node.js, 能夠去Node.js官網下載.html
Step2: 在Git或者cmd中輸入下面這段代碼, 經過全局先將webpack指令安裝進電腦中
npm install webpack -gjava
Step3: 使用Git Bash here 或者 cmd cd命令使當前目錄轉到當前項目的目錄下, 而後輸入下面這段命令
npm init

接下來會彈出一些信息, 就是一些項目名和一些參數的描述, 能夠所有按回車使用默認信息, 完成以後項目文件夾下會生成一個package.json的文件

這樣webpack就安裝完成了.

webpack配置

Step1: 建立項目文件夾, 名字自起, 但路徑名不要包含中文, 以及項目名也不要叫」webpack」, 而且不要包含大寫字母.
例:
Step2: 接下來建立並編寫配置文件. 首先咱們先介紹幾個配置文件的參數.
- entry：是頁面入口文件配置（html文件引入惟一的js 文件）
- output：對應輸出項配置
  - path ：入口文件最終要輸出到哪裏，
  - filename：輸出文件的名稱
  - publicPath：公共資源路徑
Step3: 在你的項目目錄下建立webpack.config.js配置文件, 經過這個文件進行webpack的配置, 而且還要建立一些路徑保存基本文件. 例如:

src文件夾

Step4: 在src的js下建立一個入口文件, 我建立的叫作entry.js, 在項目目錄再建立一個index.html用來調試使用. 編寫webpack.config.js文件,node

//webpack.config.js
module.exports = {
    entry : './src/js/entry.js',//入口文件
    output : {//輸出文件
        filename : 'index.js',//輸出文件名
        path : __dirname + '/out'//輸出文件路徑
    },
}

咱們隨便在index.html和入口文件entry.js寫點什麼看看是否成功配置,jquery

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>ss</title>
</head>
<body>
111
    <script src="./out/index.js"></script>//注意在這裏引入的是打包完成的js文件
</body>
</html>

//entry.js
console.log('1234');

以後使用Git Bash here 或者 cmd cd命令使目錄爲當前項目目錄, 輸入webpack或者webpack -w命令, 查看index.html是否成功console出1234;webpack

webpack 和 webpack -w 區別
webpack -w能夠對項目打包而且實時監控, 當前配置文件下的文件若是發生更改時從新打包, 但若是webpack的配置文件即webpack.config.js更改時仍是要經過webpack進行打包.(退出webpack -w 操做 ctrl+c)

web

　webpack loader加載器

接下來咱們繼續配置loader, 經過加載器處理文件：好比 sass less 等, 告知 webpack 每一種文件都須要使用什麼加載器來處理。npm

Step1: 爲了方便咱們先統一把全部的包都先下載下來, 下面再慢慢解釋.json

npm install babel-loader babel babel-core css-loader style-loader  url-loader file-loader less-loader less  --save-dev

Step2: 下載完成後, 咱們修改webpack.config.js文件, 將加載器引入.

module.exports = {
    entry :  './src/js/entry.js',
    output : {
        filename : 'index.js',
        path : __dirname + '/out'
    },
    module : {
        rules: [
            {test: /.js$/, use: ['babel-loader']},
            {test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 並把css添加到html的style標籤裏*/
            //{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 並把css變成文件經過link標籤引入*/
            {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析圖片*/
            {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成瀏覽器能夠識別的css語言*/
        ]
    },
    }

Step3: 接下來咱們先測試css, 咱們在項目文件夾下的src文件夾下建立index.css. 隨便寫一點屬性.

//index.css
.demo1 { width: 100px; height: 100px; background: red; }
.demo2 { width: 200px; height: 200px; background: orange; }

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>text</title>
</head>
<body>
<div class="demo1"></div>
<div class="demo2"></div>
<script src="./out/index.js"></script>
</body>
</html>

由於在webpack中全部文件都是模塊, 因此必需要將css引入. 在剛剛的entry.js中添加以下代碼.

//entry.js
require('../css/index.css');//引入css文件
console.log("1234");

打包webpack一下看看效果

Step4: 當有多個js文件時, 如何進行引入呢? 接下來咱們作一個簡單小功能來講明這個問題, 讓咱們點擊方塊的時候, 方塊變大.

接下來在src的js文件夾下建立一個基本的工具tool.js (不少小的問題都被我擴大化了, 只是爲了說明問題不必定適用)

//tool.js
var tool = {//獲取DOM元素
    getDom: function(className) {
        return document.getElementsByClassName(className)[0];
    }
}

module.exports = tool;//模塊出口

src的js下建立一個demo1.js文件, demo2.js同理

var obj = require('./tool.js');
    var demo1 = {
    init: function() {
        this.bindEvent();
    },
    bindEvent: function() {
        //var demo1 = document.getElementsByClassName('demo1')[0];
        var demo1 = obj.getDom('demo1');
        demo1.onclick = this.changeStyle;
    },
    changeStyle: function() {
        this.style.width = '200px';
        this.style.height = '200px';
        this.style.background = 'green';
        console.log('1');
    }
}

module.exports = demo1;

修改入口文件entry.js

require('../css/index.css');

var demo1 = require('../js/demo1.js');
var demo2 = require('../js/demo2.js');

    demo1.init();
    demo2.init();

webpack一下, 看看效果

關於圖片的打包

Step1: 在img文件夾下隨便找一個小一點的圖片放進去.

Step2: 修改entry.js

require('../css/index.css');

var demo1 = require('../js/demo1.js');
var demo2 = require('../js/demo2.js');

    demo1.init();
    demo2.init();

var oImg = new Image();
oImg.src = require('../img/1.gif');//當成模塊引入圖片
document.body.appendChild(oImg);

因爲咱們引入的是靜態資源, 在webpack.config.js中修改一下

module.exports = {
        entry :  './src/js/entry.js',
        output : {
            filename : 'index.js',
            publicPath: __dirname + '/out',//添加靜態資源, 不然會出現路徑錯誤
            path : __dirname + '/out'
        },
        module : {
            rules: [
                {test: /.js$/, use: ['babel-loader']},
                {test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 並把css添加到html的style標籤裏*/
                //{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 並把css變成文件經過link標籤引入*/
                {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析圖片*/
                {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成瀏覽器能夠識別的css語言*/
            ]
        },
}

你們本身webpack看看效果

webpack進階設定

咱們在項目中有多個html文件時怎麼處理呢?, 接下來咱們從新設定配置文件, webpack.config.js

module.exports = {
            entry : {index1: './src/js/entry.js', index2: './src/js/entry2.js'},
        output : {
                filename : '[name].js',//這樣就能夠生成兩個js文件, 名字分別爲index1.js, 和index2.js
                publicPath: __dirname + '/out',//添加靜態資源, 不然會出現路徑錯誤
                path : __dirname + '/out'
            },
            module : {
                rules: [
                    {test: /.js$/, use: ['babel-loader']},
                    {test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 並把css添加到html的style標籤裏*/
                    //{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 並把css變成文件經過link標籤引入*/
                    {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析圖片*/
                    {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成瀏覽器能夠識別的css語言*/
                ]
            },
    }

webpack插件使用

首先咱們因爲要使用webpack插件, 所以咱們要從新下載一下webpack包, 將目錄定位到當前項目目錄, 輸入npm install webpack
以後咱們修改webpack.config.js, 將下面代碼放到配置文件開頭. 這樣就能夠使用插件了

var webpack = require('webpack');

將插件信息寫到配置文件裏

var webpack = require('webpack');
var uglifyPlugin = new webpack.optimize.UglifyJsPlugin({minimize: true});//代碼壓縮

var CommonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin('common');//把公共模塊提取出來, 並取名爲'common'(名字自起), webpack以後再out文件夾下生成common.js, 測試時記得引入提取出來的公共模塊js文件

var ExtractTextPlugin = require("extract-text-webpack-plugin");//將css獨立引入變成link標籤形式, 使用該插件須要獨立下載'npm install extract-text-webpack-plugin --save-dev', 同時下面的rules也必須更改

var providePlugin = new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery'});//引入jquery



module.exports = {
    entry : {index: './src/js/entry.js', index2: './src/js/entry2.js'},
    output : {
        filename : '[name].js',
        publicPath: __dirname + '/out',
        path : __dirname + '/out'
    },
    module : {
        rules: [
            {test: /.js$/, use: ['babel-loader']},
            //{test: /.css$/, use: ['style-loader', 'css-loader']},
            {test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},
            {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},
            {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}
        ]
    },
    plugins: [uglifyPlugin, CommonsChunkPlugin, new ExtractTextPlugin('[name].css'),providePlugin]//插件集合
}

webpack服務器

首先先定位目錄輸入命令 npm install webpack-dev-server -g, 修改webpack.config.js文件

publicPath: 'http://localhost:8080/out',

html文件所引用的目錄也要更改:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>text</title>
     <link rel="stylesheet" href="http://localhost:8080/out/index.css">
</head>
<body>
    <a href="http://localhost:8080/index2.html">11</a>
    <div class="demo1"></div>
    <div class="demo2"></div>
    <script src="http://localhost:8080/out/common.js"></script>
    <script src="http://localhost:8080/out/index.js"></script>
</body>
</html>

webpack-dev-server一下看看效果

小工具: webpace-dev-server –devtool eval-source-map –progess –colors打包時輸入這一行能夠直接找到文件若是出錯時的位置

小知識點: 上面這一句話若是以爲太長能夠將

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "xuan": "webpack-dev-server --devtool eval-source-map --progress --colors"
  },

這一段代碼放到項目目錄下的package.json裏, 這樣調試時若是輸入npm run xuan就等於輸入那一長串代碼