webpack 4 x、あなたに…

21730 ワード

webpackは先端開発に欠かせない神器です.
まず彼の核心機能を見てください.なぜ彼を使うのですか?
1.包装:複数のJavascriptファイルを一つのファイルに包んで、サーバーの圧力とダウンロードの帯域幅を減らすことができます.
2.変換:拡張言語を普通のJavaScriptに変換し、ブラウザをスムーズに実行させる.
3.最適化:先端が複雑になると、性能にも問題が発生し、WebPackは性能の最適化と向上の責任を負うようになりました.
4.Webpackは生産環境において重要な役割を果たしています.httpの要求数を減らすことです.
以上の3つの点はそれ=彼の核心的な役割です.
二、webpack(最新版4.8.3)設置と環境配置
webpackってやつは更新が早いので、バージョンによってはwebpackで使うコマンドもほとんど違います.
1.グローバルインストールwebpack npm i webpack-g
2.プロジェクトフォルダに入り、プロジェクトを初期化し、pake.jsonファイルを生成するため.npm initは車を返し続けてもいいです.
3.webpackの依存node_を取り付けます.modules;npm i-D webpack
4.グローバルインストールwebpack-cli;npm i webpack-cli-g
5.デフォルト開発環境を設定し、モードを設定し、「開発環境」かそれとも「生産環境」かを指定する.もちろん開発を続ける中で、開発環境を優先的に設定しなければなりません.webpack--mode development;
6.後で包装すればwebpack--mode developmentを入力できます.しかし明らかに毎回このように入力するのは煩わしいです.pake.json文のscriptの下に「dev」を配置する:「webpack--mode development」と「build」:「webpack--mode production」;
npm run devを入力すると、プロジェクトが自動的に生成されたdistフォルダにパッケージできます.npm run build包装生産環境;
7.すべての開発ファイルはsrcフォルダの下になければなりません.webpack 4のデフォルトの入口フォルダはsrcです.
注意:
1、webpack-cliは全体的にインストールしなければなりません.そうでないとwebpack命令は使えません.
2、webpackも全体的にインストールしなければなりません.そうでないとwebpack命令も使えません.
3、webpack 4.xのwebpack.co.fig.jsのような配置ファイルは必須ではない.
4、デフォルトのエントリファイルは./src/index.jsで、デフォルトの出力ファイル./dist/main.jsです.
三、webpack.co nfig.js webpack-cli initを配置する.

Will your application have multiple bundles? No //     string,     object
2. Which module will be the first to enter the application? [example: './src/index'] ./src/index //     
3. What is the location of "app"? [example: "./src/app"] './src/index' //      
4. Which folder will your generated bundles be in? [default: dist]: //     ，   dist
5. Are you going to use this in production? No // (Yes  9   'config', No    'prod')
6. Will you be using ES2015? Yes //     ES6 => ES5    
7. Will you use one of the below CSS solutions? CSS //        ，       loader   
8. If you want to bundle your CSS files, what will you name the bundle? (press enter to skip) //     
9. Name your 'webpack.[name].js?' [default: 'config']: // webpack.config.js

Congratulations! Your new webpack configuration file has been created!

webpack.co.nfig.js一覧


//       path
const path = require('path');
const uglify = require('uglifyjs-webpack-plugin');//JS    ，  uglify
const htmlPlugin= require('html-webpack-plugin');//html  
// const extractTextPlugin = require('exrract-text-plugin');//extract-text-webpack-plugin CSS      
// __dirname node.js     ，              。
var website = {
  publicPath:"http://localhost:5252/"
}
module.exports = {
    devtool: 'eval-source-map',
    // entry:__dirname + '/src/main.js',
    entry:{
       main:'./src/main.js'
    },
    output:{
      //        
      path:path.resolve(__dirname,'dist'),//__dirname                 ,path.resolve（）                   
      //     
      // filename:'[name].js'//filename:         
      // filename:'[name].[chunkHash:2].js'//           .js,       
    },
    //  ：    CSS,      ，  
    module:{
      rules: [
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader'] 
          //  loader: [ 'style-loader', 'css-loader' ]
          //  ：use:[
            // {loader:'style-loader'},
            // {loader:'css-loader'}
          // ]
          
        },
        {
          test:/\.(png|jpg|gif)/,
          use:[{
              loader:'url-loader',
              options:{
                  limit:500000
              }
          }]
       }
      ]
    },
    //  ，           
    plugins:[
      new uglify(),
      new htmlPlugin({
        minify:{
            removeAttributeQuotes:true
        },
        hash:true,
        template:'./src/index.html'
       
    })
    // new extractTextPlugin("./css/index.css")//        
    ],
    mode:'development',
    //  webpack      
    devServer: {
      //        
      contentBase: "./dist",//                 || contentBase:path:path.resolve(__dirname,'dist')
      //    IP  ，    IP     localhost
      host:'localhost',
      //         
      compress:true,
      //       
      port:5252,
      historyApiFallback: true,//   
      inline: true//    
    } 
  }

三、webpack:サービスと熱更新
npm install webpack-dev-server-save-devをインストールしてpage.jsonにscriptsを設定します.「\"server":"webpack-dev-server"」,
ホットアップデート:webpack-dev-serverは、自動更新ページのための2つのモードを提供します.npm run server;npm startは、このコマンドを使用して、pake.jsonの中でscrptsに設定します.「start」:「webpack&webpack-dev-server--hot--inline」
三、loaders(webpackの核心):
すべてのLoadersはnpmに単独でインストールし、webpack.co.nfig.jsに配置する必要があります.
1.Loadersの配置タイプ:
test:処理ファイルの拡張子にマッチする表現です.このオプションは設定が必要です.
use:loaderの名前は、モジュールの名前を使いたいです.このオプションも配置しなければなりません.そうでないとエラーが発生します.
include/exclude:処理しなければならないファイル(フォルダ)を手動で追加したり、処理しないファイル(フォルダ)をシールドしたりします.
query:loadersに追加の設定オプションを提供します.
四、ファイル圧縮パッケージ1.cssファイル圧縮は、入口ファイルindex.jsに導入し、distの下のjsファイルに圧縮することができます.
index.jsはimport css from.///css/index.css'に書き込みます.
2.cssの中の写真のロード力の問題:
明らかに、パッケージ化された画像は404であるので、解決方法はurl-loaderとfile-loaderをインストールすることである.
npm install--save-dev file-loader url-loader
file-loader:参照経路の問題を解決し、バックグラウンドにbackgroundパターンを持ってurlを導入すると、webpackは最終的に各モジュールを一つのファイルに包装します.だから、私達のスタイルのurl経路は相対的な入口です.元のcssファイルがあるルートではなく、写真の導入に失敗します.この問題はfile-loaderを使います.解決されたfile-loaderはプロジェクトのurl導入(cssに限らず)を解析できます.私達の構成によって、写真を相応のパスにコピーして、また私達の構成によって、包装後のファイル参照経路を修正して、正しいファイルを指すようにします.
url-loader:絵が多いとhttpリクエストが多くなり、ページの性能が低下します.この問題はurl-loaderで解決できます.url-loaderは導入したピクチャをコード化してdataURlを生成します.画像データを一文字に翻訳するのに相当します.またこの文字をファイルに包装して、最終的にはこのファイルを導入するだけで画像にアクセスできます.もちろん、画像は画像にアクセスできます.大きな符号化は性能を消耗するので、url-loaderはlimitパラメータを提供し、limitバイト未満のファイルはDataURlに変換され、limitより大きいファイルはfile-loaderを使用してcopyを行う.
url-loaderはfile-loaderをカプセル化しました.url-loaderはfile-loaderに依存しません.つまりurl-loaderを使う時、url-loaderをインストールするだけでいいです.file-loaderをインストールする必要はありません.url-loaderはfile-loaderを内蔵しています.
3.cssファイル分離
extract Text Pluginをインストールします.npm install extract-text-webpack-plugin@next--save-dev
const extract Text Plugin=require(「extract-text-webpack-plugin」);
＊＊最新版のwebpackはアップグレード版に対応する分離プラグインをインストールするので、@nextを追加します.
インストールが完了したらwebpack.co nfig.jsに導入します.:const extract TextPlugin=require('extract-text-webpack-plugin')
インストールが終わったら、webpack.co.nfig.jsにロード項目を設定します.

// use: [
        //   { loader: 'style-loader', options: { sourceMap: true } },
        //   { loader: 'css-loader' }
        // ]
        // css  ：
               ：：：
        use: extractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })

Pluginsを設定します.new extract TextPlugin('/css/index.css')は包装後のファイルのロードを設定します.
npm run dev後、distフォルダの下で自動的にcssが生成されます.
4.cssファイルが分離された後、cssの中の背景画像の力が間違っています.
解決方法は、webpack.co nifg.jsにおいて、グローバルに一つのip属性を宣言することです.

var website ={
  publicPath:"http://localhost:5200/"//    ip  ，     server  
}

   output(    ) ，           publicPath；              
publicPath:website.publicPath

5.html中の写真を処理する:路力と書類を包装する

        ：
npm install html-withimg-loader --save
 webpack.config.js   loader：
{
    test: /\.(htm|html)$/i,
     use:[ 'html-withimg-loader'] 
}
      ，          ，

6.lessファイルパッケージ::lessとless-loader npm i less less-loader-Dをインストールする

  ： src     less  ;
  ，     js   less  ；
import less from '.././less/index.less';

   webpack.config.js   less-loader：
use: [
            {loader:'css-loader'},
            {loader:'less-loader'} // js   less   css ;
          ]

7.jslabal変換::cnpm install--save-dev babel-core babel-loader babel-prest-es 2015 babel-prest-react

 webpack.config.js    bable
{
    test:/\.(jsx|js)$/,
    use:{
        loader:'babel-loader',
        options:{
            presets:[
                "es2015","react"
            ]
        }
    },
    exclude:/node_modules/
}

今はネット上ではすでにbabel-prest-es 2015が流行っていません.今は公式のおすすめはbabel-prest-envです.
npm install--save-dev babel-preset-env
新規作成.babelrcファイルは、中に配置すればいいです.

{
    "presets":["react","env"]
}

基本的な最終webpack.com fig.js配置

//  webpack.config.js       require，      ；
const webpack = require('webpack');//  webpack      ， plugins     
const path = require('path');//  node path  （node path                    ）
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');//    JS   ，  uglify
const HtmlWebpackPlugin = require('html-webpack-plugin');//    html   
const extractTextPlugin = require('extract-text-webpack-plugin');//   css      js   ，        ，            css less
const glob = require('glob');//  Node.js         global；node glob       *   ，    glob  ；https://blog.csdn.net/tangxiaolang101/article/details/53931145
const PurifyCSSPlugin = require('purifycss-webpack');//PurifyCSS        CSS  
// const entry = require(./webpack_config/entry_webpack.js);
//   css        
var website ={
  publicPath:"http://localhost:5200/"
}
// if(process.env.type== "build"){
//   var website={  
//       publicPath:"http://localhost:5200/"
//   }
// }else{
//   var website={
//       publicPath:"http://localhost:5200/"
//   }
// }
// console.log( encodeURIComponent(process.env.type));
module.exports = {
  devtool: 'eval-source-map',
  entry: {
    main:'./src/js/index.js'
  },
  // entry:entry.path,
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath:website.publicPath//   css                    publicPath；              
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      },
      {
        test: /\.css$/,
        // use: [
        //   { loader: 'style-loader', options: { sourceMap: true } },
        //   { loader: 'css-loader' }
        // ]
        // css  ：
        use: extractTextPlugin.extract({
          use: [
            {loader:'css-loader'},
            {loader:'less-loader'}
          ],
          fallback: "style-loader",
        })
      },
      {
        test:/\.(png|jpg|gif)/ ,
        use:[{
            loader:'url-loader',
            options:{
                limit:5000,
                outputPath:'img/'//outputPath               
            }
        }]
     },
    //      html   img      404  
     {
      test: /\.(htm|html)$/i,
       use:[ 'html-withimg-loader'] 
  },
  {
    test: /\.less$/,
  use: [
    {loader: 'style-loader'},
    {loader:'css-loader'},
    {loader:'less-loader'}
  ]
  },
  {
    test:/\.(jsx|js)$/,
    use:{
        loader:'babel-loader',
        options:{
            presets:[
                "es2015","react"
            ]
        }
    },
    exclude:/node_modules/
},
{   
    test:/\.(jsx|js)$/,
    use:{
        loader:'babel-loader',
    },
    exclude:/node_modules/
}
  //  {
  //   watchOptions:{ 
  //     //       ，      
  //     poll:1000, 
  //     //               。     500        ，       
  //     aggregateTimeout:500, 
  //     //      
  //     ignored:/node_modules/, 
  // }
  //  }
    ]
  },
  plugins: [
    new UglifyJSPlugin(),
    new extractTextPlugin('/css/index.css'),
    new HtmlWebpackPlugin({
        minify:{
            removeAttributeQuotes:true  
        },
        hash:true,
        template:'./src/html/index.html',
        filename:'html/index.html'
    }),
    new HtmlWebpackPlugin({
      template:'./src/html/oop.html',
      filename:'html/oop.html'
    }),
    new PurifyCSSPlugin({
      // Give paths to parse for rules. These should be absolute!
      paths: glob.sync(path.join(__dirname, 'src/*.html')), }),
      // ProvidePlugin webpack     ，                js 
      new webpack.ProvidePlugin({ $:"jquery" })
  ],
  //          JS   ，        
  devServer: {
    //        
    contentBase: "./dist",//                 || contentBase:path:path.resolve(__dirname,'dist')
    //    IP  ，    IP     localhost
    host:'localhost',
    //         
    compress:true,
    //       
    port:5200,
    historyApiFallback: true,//   
    inline: true//    
  } 
};

pake.josn

{
  "name": "md",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dv": "webpack --mode development",
    "bd": "webpack --mode production",
    "server": "webpack-dev-server  --open"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "html-withimg-loader": "^0.1.16",
    "jquery": "^3.3.1",
    "npm": "^6.0.1",
    "to": "^0.2.9",
    "update": "^0.7.4"
  },
  "devDependencies": {
    "autoprefixer": "^8.5.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.0.4",
    "less-loader": "^4.1.0",
    "postcss-loader": "^2.1.5",
    "purify-css": "^1.2.5",
    "purifycss-webpack": "^0.7.0",
    "style-loader": "^0.21.0",
    "uglifyjs-webpack-plugin": "^1.2.5",
    "url-loader": "^1.0.1",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.3",
    "webpack-dev-server": "^3.1.4"
  }
}

一つの閉鎖的な小さい例