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.jsmodule.exports = {  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件  output: {    path: __dirname + "/public",//打包后的文件存放的地方    filename: "bundle.js"//打包后输出文件的文件名  }}

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

安装组件

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

配置

//webpack.config.jsdevServer: {    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.jsmodule: {  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.jsmodule: {    rules: [        {//处理JS           test: /(\.jsx|\.js)$/,           use: {             loader: "babel-loader",             options: {                presets: [                   "es2015", "react"                ]             }           },          exclude: /node_modules/        }    ]}

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

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

//webpack.config.jsmodule: {    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.移除public2.在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

解决：

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