webpack -- 入门

本文根据《入门Webpack，看这篇就够了》实践所写

webpack使用前准备

1、npm init 在文件根目录创建一个pageage.json文件，它是npm说明文件，包括当前项目的依赖模块，自定义的脚本任务等等
输入这个命令后，终端会问你一系列诸如项目名称，项目描述，作者等信息，package name 一定不能是webpack，其他不重要可以一直按回车，

2、安装Webpack
npm install –save-dev webpack 项目中安装
npm install -g webpack 全局中安装

3、建立两个文件夹 app

Greeter.js

main.js

public

index.html

webpack使用

经过测试，webpack必须要安装在全局才可以使用

在终端直接使用： webpack app/main.js public/bundle.js
通过配置文件使用： webpack

//webpack.config.js
module.exports = {
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

使用webpack构建本地服务器，自动刷新显示修改后的结果

安装组件

npm install --save-dev webpack-dev-server

配置

//webpack.config.js
devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
} 

//package.json
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open"
}

使用

npm run server  在8080端口查看

Loader

安装需要的loader组件

npm install --save-dev css-loader

配置

//webpack.config.js
module: {
  loaders: [
     {
        test: /\.css$/,
        use:[//同一文件引入多个loader必须要分开写
           {
              loader: "style-loader"
           },
           {
              loader:"css-loader"
           },
           {
              loader: "postcss-loader",
              options: { // 如果没有options这个选项将会报错 No PostCSS Config found
                 plugins: (loader) => [
                    require('autoprefixer')(), //CSS浏览器兼容
                 ]
              }
           }
        ]
     },

  ]
}

PostCSS

使用PostCSS来为CSS代码自动添加适应不同浏览器的CSS前缀

安装

//安装postcss-loader 和 autoprefixer（自动添加前缀的插件）
npm install --save-dev postcss-loader autoprefixer

配置

module: {
  loaders: [
     {//处理css
        test: /\.css$/,
        use:[//同一文件引入多个loader必须要分开写
           {
              loader: "style-loader"
           },
           {
              loader:"css-loader"
           },
           {
              loader: "postcss-loader",
           }
        ]
     },

  ]
}

// 新建的postcss.config.js文件
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

Babel

安装依赖模块

// 解析Es6的babel-preset-es2015包和解析JSX的babel-preset-react包
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

配置

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

也可以再单独的文件中进行配置

//新建的.babelrc文件
{
  "presets": ["react", "es2015"]
}

//webpack.config.js
module: {
    rules: [
        {
           test: /(\.jsx|\.js)$/,
           use: {
             loader: "babel-loader"
           },
          exclude: /node_modules/
        }
    ]
}

插件

BannerPlugin 内置插件

//给打包后的js文件添加一个版权声明
module.exports = {
...
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究')
    ],
};

HtmlWebpackPlugin

作用：根据index.html模板，自动生成一个自动引用你打包后的JS文件的新index.html
安装：

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

使用前提：

1.移除public
2.在app目录下，创建一个index.tmpl.html文件模板，插件会依据此模板生成最终的html页面，会自动添加所依赖的 css, js，favicon等文件
3.更新webpack的配置文件，方法同上,新建一个build文件夹用来存放最终的输出文件

配置：

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

module.exports = {
    entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
    output: {
        path: __dirname + "/build",
        filename: "bundle.js"
    },
    ...
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数
        })
    ],
};

使用：

//build文件夹下面生成了bundle.js和index.html
执行 webpack 

Hot Module Replacement

热加载模块: 在修改组件代码后，自动刷新实时预览修改后的效果。

安装react-transform-hmr：

npm install --save-dev babel-plugin-react-transform react-transform-hmr

配置文件：

1、在webpack配置文件中添加HMR插件；
2、在Webpack Dev Server中添加“hot”参数；

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

module.exports = {
    entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
    output: {
        path: __dirname + "/build",
        filename: "bundle.js"
    },
    devtool: 'eval-source-map',
    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true,
        hot: true//2、在Webpack Dev Server中添加“hot”参数
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数
        }),
        new webpack.HotModuleReplacementPlugin()//1、在webpack配置文件中添加HMR插件；
    ],
};

或者，在用react时只要配置Babel：

// .babelrc
{
  "presets": ["react", "es2015"],
  "env": {
    "development": {
    "plugins": [["react-transform", {
       "transforms": [{
         "transform": "react-transform-hmr",

         "imports": ["react"],

         "locals": ["module"]
       }]
     }]]
    }
  }
}

使用：

每次保存就能在浏览器上看到更新内容

出现的报错：

1、

解决：

此时命令行所在的文件夹不是项目所在的文件夹

2、npm err!errno -4048

解决：

关掉命令行使用管理员身份重新打开