Webpackまとめと踏み込み実録

8437 ワード

Webpackまとめ
webpackはgulpと差の少ない自動化された構築ツールであり、機能はまだ強く、画像圧縮を処理することができ、jsを処理することができ、sass|scss、cssなどのプリコンパイルされた言語を処理することができ、これらはすべて強力なloader機能のおかげである.

準備編
webpackはnodeのnpmパッケージ管理ツール上のツールであり、ダウンロードとインストール:npm install -g --save-dev webpackと同様である.
主にファイル:webpack.config.js、package.json(初期化自動生成、インストールされたloadersなども含む多くのバージョンに関する情報)、エントリファイル、エクスポートファイル.
Webpackでconfig.jsでは、主なコードフレームワーク:

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

module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'bundle.js',               //      
        path: path.resolve(__dirname, 'build') //         
    },
    devServer: { //                      
        contentBase: path.resolve(__dirname, 'build') //           
    },
    module: { //               
        rules: [ //                         
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env", "react"
                        ] 
                    }
                },
                exclude: path.resolve(__dirname, 'node_modules'),
                include: path.resolve(__dirname, 'src'),
            },
            {//css    
                test: /\.scss/,
                use: ExtractTextPlugin.extract({
                    use: [{
                        loader:"css-loader"
                    },{
                        loader: 'sass-loader'
                    }],
                    fallback: "style-loader"
                })
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    use: ['css-loader'],
                }),
            },
            {
    　　　　　　test: /\.(png|jpg)$/,
    　　　　　　loader: 'url-loader?limit=8192',
    　　　　}
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'main-page.css',
        }),
    ]
}; path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: './src/main.js',
    output: {
        filename: 'bundle.js',               //输出的文件名
        path: path.resolve(__dirname, 'build') //输出文件所在的目录
    },
    devServer: { // 检测代码变化并自动重新编译并自动刷新浏览器
        contentBase: path.resolve(__dirname, 'build') // 设置静态资源的根目录
    },
    module: { // 如何处理项目中不同类型的模块
        rules: [ // 用于规定在不同模块被创建时如何处理模块的规则数组
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env", "react"
                        ] 
                    }
                },
                exclude: path.resolve(__dirname, 'node_modules'),
                include: path.resolve(__dirname, 'src'),
            },
            {//css单独打包
                test: /\.scss/,
                use: ExtractTextPlugin.extract({
                    use: [{
                        loader:"css-loader"
                    },{
                        loader: 'sass-loader'
                    }],
                    fallback: "style-loader"
                })
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    use: ['css-loader'],
                }),
            },
            {
    　　　　　　test: /\.(png|jpg)$/,
    　　　　　　loader: 'url-loader?limit=8192',
    　　　　}
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'main-page.css',
        }),
    ]
};

在package.json中，有一段如下代码，可以在其中做修改以便更方便的执行命令。

bug篇

好吧，我不擅长做笔记。。。。搞得有些bug我暂时想不起来了，有多少总结多少，以后记起来遇到了就补充

很多情况下，webpack的版本与extract-text-webpack-plugin的版本不一致，导致执行的时候会报警告：

npm WARN [email protected] requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
updated 1 package in 23.18s

npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
updated 1 package in 23.18s

其实是由于本身安装的时候的默认的版本就很尿性的没有一致，所以只需要手动安装一次相同的版本，由于我的webpack是4.0.0的，所以：$ npm install --save-dev [email protected]

webpack单独打包scss\css：
```
{//css    
  test: /\.scss/,
  use: ExtractTextPlugin.extract({
    use: [{
        loader:"css-loader"
    },{
        loader: 'sass-loader'
    }],
        fallback: "style-loader"
    })
  },
  {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
      use: ['css-loader'],
    }),
},
  test: /\.scss/,
  use: ExtractTextPlugin.extract({
    use: [{
        loader:"css-loader"
    },{
        loader: 'sass-loader'
    }],
        fallback: "style-loader"
    })
  },
  {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
      use: ['css-loader'],
    }),
},
```
```
 plugins: [
        new ExtractTextPlugin({
            filename: 'main-page.css',
        }),
    ]
        new ExtractTextPlugin({
            filename: 'main-page.css',
        }),
    ]
```
1. 要将css、less、scss等文件打包成一个单asd独的css文件，而不是一起打包到bundle.js里面，则要使用ExtractTextPlugin插件，并且配置好webpack.config.js的几个loader：
```
npm install --save-dev extract-text-webpack-plugin
```
  const ExtractTextPlugin = require('extract-text-webpack-plugin'); ExtractTextPlugin = require('extract-text-webpack-plugin'); plugins: [ new ExtractTextPlugin('css/index.css') ] : [
  new ExtractTextPlugin('css/index.css')
  ] { test: /\.css$/, use:ExtractTextPlugin.extract({ fallback:"style-loader", use:"css-loader" }) }, { test: /\.scss$/, use:ExtractTextPlugin.extract({ fallback:"style-loader", use:[{ loader:"css-loader" },{ loader:"sass-loader" }] }) }, { test: /\.less$/, use:ExtractTextPlugin.extract({ fallback:"style-loader", use:[{ loader:"css-loader" },{ loader:"less-loader" }] }) } test:/\.css$/,
  use:ExtractTextPlugin.extract({
  fallback:"style-loader",
  use:"css-loader"
  })
  },
  {
  test:/\.scss$/,
  use:ExtractTextPlugin.extract({
  fallback:"style-loader",
  use:[{
  loader:"css-loader"
  },{
  loader:"sass-loader"
  }]
  })
  },
  {
  test:/\.less$/,
  use:ExtractTextPlugin.extract({
  fallback:"style-loader",
  use:[{
  loader:"css-loader"
  },{
  loader:"less-loader"
  }]
  })
  }
2. webpackでiconfontアイコンを使用する:webpackのルールの中で:
  兄弟ディレクトリ:./

CSSでよく使われる単位(em/rem、vw/vh、vmin/vmax)

POJ-2811:消灯問題(ボタンの問題、列挙)