mac下webpack入門流程總結(jié)

此文為 這篇文章的縮略版

  • 創(chuàng)建項(xiàng)目文件夾
    mkdir webpack && cd webpack

  • 初始化生成package.json文件
    npm init

  • 安裝webpack至該目錄(非全局)

    • npm install --save-dev webpack
    • npm install --save-dev webpack-cli 或 npm install --save-dev webpack-command

  • 創(chuàng)建測試用結(jié)構(gòu)

    • mkdir app public
    • touch app/Greeter.js app/main.js public/index.html

  • 各文件初始代碼

    • public/index.html
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div id='root'>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>
    • app/Greeter.js
    const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter());
    • app/main.js
    module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};

  • 使用webpack編譯
    node_modules/.bin/webpack app/main.js public/bundle.js

  • 配置webpack.config.js簡化上條命令成 node_modules/.bin/webpack

    • touch webpack.config.js
    module.exports = {
    entry: __dirname + '/app/main.js',   //唯一入口文件
    output: {
        path: __dirname + '/public',    //打包后文件存放位置
        filename: 'bundle.js'          //打包后輸出文件文件名
    },
    mode: 'development'               //不配置則瀏覽器控制臺會有提示, 暫不知有何效果
}

  • 配置package.json簡化上條命令成 npm start (實(shí)際又從npm run start省略來

    {
    ...
    "scripts": {
        ...
        "start": "webpack"
    }
}

  • 為webpack配置source maps ，在webpack.config.js中添加

    module.exports = {
    ...
    devtool: 'eval-source-map'              //在同文件中生成source map, 適用于開發(fā)環(huán)境
}

  • 構(gòu)建本地服務(wù)器

    • npm install --save-dev webpack-dev-server
    • module.exports = {
   devServer: {
       contentBase: './public',        //應(yīng)該是指localhost:8080訪問的根目錄
       historyApiFallback: true,
       inline: true                      //瀏覽器監(jiān)聽, 修改文件保存后自動刷新
   }
}

    • {
    ...
    "scripts": {
       ...
       "server": "webpack-dev-server --open"
    }
}
    • npm run server

  • 更新文件

    • touch app/config.json
    • {
    "greetText": "Hi there and greetings from JSON!"
}
    • 更新app/Greeter.js 
      var config = require('./config.json');

module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = config.greetText;
  return greet;
};

  • 安裝Babel

    • npm install --save-dev babel-core babel-loader babel-preset-env
    • webpack.config.js中配置Babel 
      module.exports = {
    ...
    module: {
        rules: [
            ...
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: 'babel-loader'
                    options: {
                        presets: [
                            'env'
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
}
    • 更新app/Greeter.js 
      import config from './config.json';

var greeter = () => {
    let greet = document.createElement('div');
    greet.textContent = config.greetText;
    
    return greet;
}
export default greeter
    • 更新 app/main.js 
      import greeter from './Greeter';

document.getElementById('root').appendChild(greeter());

  • 將Babel中options配置項(xiàng)分離至新文件.babelrc

    {
    "presets": ["env"]
}

  • 安裝并使用style-loader 和 css-loader

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

    • 更新webpack.config.js配置

      module.exports = {
    ...
    module: {
        rules: [
            ...
            {
                test: /(\.css)$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                    }
                ]
            }
        ]
    }
}

    • app下創(chuàng)建main.css，touch app/main.css

      *{
    margin: 0;
    padding: 0;
}

    • 將app/main.css導(dǎo)入main.js

      ...
import './main.css';

  • css模塊化

    • 配置css-loader 
      {
    loader: 'css-loader',
    options: {
        modules: true,                                          //啟用css modules
        localIdentName: '[name]__[local]--[hash:base64:5]'      //指定css的類名格式
    }
}
    • app下創(chuàng)建greeter.css， touch app/greeter.css 
      .root {
    background: #87d;
    color: limegreen;
}
    • 將app/greeter.css導(dǎo)入Greeter.js 
      import config from './config.json';
import styles from './Greeter.css';            //引入css

var greeter = () => {
    let greet = document.createElement('div');
    greet.textContent = config.greetText;
    greet.className = styles.root;            //賦予className
    
    return greet;
}
export default greeter

  • 安裝使用postcss, autoprefixer

    • npm install --save-dev postcss-loader autoprefixer
    • 在css module后添加postcss-loader 
      {
    test: /(\.css$)/,
    use: [
        ...
        {
            loader: 'postcss-loader'
        }
    ]
}
    • 配置postcss.config.js 
      module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

  • 使用內(nèi)置插件BannerPlugin

const webpack = require('webpack');
...

module.exports = {
    ...
    plugins: [
        new webpack.BannerPlugin('版權(quán)所有, 翻版必究')             //內(nèi)置插件.....
    ]
}
  • 安裝使用HtmlWebpackPlugin插件
    • npm install --save-dev html-webpack-plugin
    • 刪除public文件夾，創(chuàng)建app/index.tpl.html文件touch app/index.tpl.html 
      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div id='root'></div>
  </body>
</html>
    • 更新webpack.config.js 
      ...
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    ...
    output: {
        ...
        path: __dirname + '/build',
    },
    devServer: {
        ...
        contentBase: './build'
    },
    plugins: [
        ...
        new HtmlWebpackPlugin({
            template: __dirname + '/app/index.tpl.html'
        })
    ]
}
    • 使用內(nèi)置插件Hot Module Replacement 
      ...
module.exports = {
    ...
    devServer: {
        ...
        hot: true
    },
    plugins: [
        ...
        new webpack.HotModuleReplacementPlugin()
    ]
}
  • 安裝使用mini-css-extract-plugin插件 (詳細(xì)
    • npm install --save-dev mini-css-extract-plugin
    • 替換style-loader 
      ...
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

...
{
    loader: MiniCssExtractPlugin.loader
}
  • 安裝使用 clean-webpack-plugin插件 (詳細(xì) 
...
const CleanWebpackPlugin = require("clean-webpack-plugin");

  plugins: [
    ...
    new CleanWebpackPlugin('build/*.*', {
      root: __dirname,
      verbose: true,
      dry: false
    })
  ]
  • 打包文件加入緩存
...
module.exports = {
    ...
    output: {
        ...
        filename: 'bundle-[hash].js'
    }
};


參考：

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Webpack學(xué)習(xí)總結(jié) 此文只是自己學(xué)習(xí)webpack的一些總結(jié)，方便自己查閱，閱讀不變，非常抱歉！！ 下載安裝：...
    Lxs_597閱讀 1,088評論 0贊 0
  • 目錄第1章 webpack簡介 11.1 webpack是什么？ 11.2 官網(wǎng)地址 21.3 為什么使用 web...
    lemonzoey閱讀 1,829評論 0贊 1
  • 1.為什么要使用webpack 現(xiàn)今的很多網(wǎng)頁其實(shí)可以看做是功能豐富的應(yīng)用，它們擁有著復(fù)雜的JavaScript代...
    YINdevelop閱讀 542評論 0贊 5
  • http://blog.csdn.net/weizengxun/article/details/53448885 ...
    曉盧軒閱讀 726評論 0贊 0
  • 這個(gè)世界無形中有一種魔力，會將相似的故事相似的人相似的東西聚集在一起。 就如最近找我咨詢的幾位單身媽媽，她們帶著一...
    吾愛絲語閱讀 475評論 0贊 0

友情鏈接更多精彩內(nèi)容