Webpack的使用

Webpack的使用：

1、在项目目录下安装webpack：

　　一、npm install -g webpack //全局安装

　　二、npm install --save-dev webpack //安装到你的项目目录

2、package.json文件

　　一、npm init //自动帮你建立package.json文件

　　二、npm install --save-dev webpack  //安装Webpack做为依赖包

3、配置文件webpack.config.js

　　一、在当前练习文件夹的根目录下新建一个名为webpack.config.js的文件

　　二、webpack.config.js文件里面的内容：

module.exports = {

　　entry: __dirname + "/main.js",       //已屡次说起的惟一入口文件

　　output: {

　　　　　　　　path: __dirname + "/public",   //打包后的文件存放的地方

　　　　　　　　filename: "bundle.js"          //打包后输出文件的文件名

　　}

}

 

 　　三、修改package.json文件

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack"          //添加start项，能够经过npm start来使用打包了文件
  }Webpack

 

 

Webpack的功能扩展：

1、Source Maps

　　一、做用：开发老是离不开调试，方便的调试能极大的提升开发效率，不过有时候经过打包后的文件，你是不容易找到出错了的地方，对应的你写的代码的位置的，Source Maps就是来帮咱们解决这个问题的。同时使得编译后的代码可读性更高，也更容易调试。

　　二、分类：&、source-map：在一个单独的文件中产生一个完整且功能彻底的文件。这个文件具备最好的source map，可是它会减慢打包速度；

　　　　　　  &、cheap-module-source-map：在一个单独的文件中生成一个不带列映射的map，不带列映射提升了打包速度，可是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试形成不便；

　　　　　　  &、eval-source-map：使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项能够在不影响构建速度的前提下生成完整的sourcemap，可是对打包后输出的JS文件的执行具备性能和安全的隐患。在开发阶段这是一个很是好的选项，在生产阶段则必定不要启用这个选项；

　　　　　　  &、cheap-module-eval-source-map：这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具备类似的缺点；

　　三、建议：对小到中型的项目中，eval-source-map是一个很好的选项，再次强调你只应该开发阶段使用它。cheap-module-eval-source-map方法构建速度更快，可是不利于调试，推荐在大型项目考虑时间成本时使用。

　　四、配置：在webpack.config.js文件里添加这一项

devtool: "eval-source-map"          //使得编译后的代码可读性更高，也更容易调试

 

 

2、devserver

　　一、做用：使用webpack搭建服务器，可让你的浏览器监听你的代码的修改，并自动刷新显示修改后的结果，Webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建，能够实现你想要的这些功能。

　　二、安装依赖：npm install --save-dev webpack-dev-server

　　三、配置：在webpack.config.js文件里添加这一项

  devServer: {
    contentBase: "./public",            //本地服务器所加载的页面所在的目录
    historyApiFallback: true,           //不跳转
    inline: true,                       //实时刷新
    port:8080                           //默认是8080端口，能够本身设置
  }

　　四、修改package.json中的内容：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open"        //webpack搭建服务器
  }

 　 五、开启服务器：

npm run server

 

 

 3、babel

　　一、做用：能使用最新的JavaScript代码（ES6，ES7...），而不用管新标准是否被当前使用的浏览器彻底支持；能使用基于JavaScript进行了拓展的语言，好比React的JSX；

　　二、安装依赖项：Babel实际上是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack能够把其不一样的包整合在一块儿使用，对于每个你须要的功能或拓展，你都须要安装单独的包（用得最多的是解析Es6的babel-env-preset包和解析JSX的babel-preset-react包）。

// npm一次性安装多个依赖模块，模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

 

　　三、配置：在webpack.config.js文件里添加这一项

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

 

 　　四、测试使用ES6以及JSX的语法，记得先安装 React 和 React-DOM

npm install --save react react-dom

 

 　　五、把babel的配置选项放在一个单独的名为 ".babelrc" 的配置文件中（webpack会自动调用.babelrc里的babel配置选项）

　　　　　　&、修改webpack.config.js的module对象

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

 

 　　　　　　&、新建一个.babelrc文件，里面的内容为：

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

 

 　　

 

 4、CSS

　　一、做用：webpack提供两个工具处理样式表，css-loader 和 style-loader，两者处理的任务不一样，css-loader使你可以使用相似@import 和 url(...)的方法实现 require()的功能,style-loader将全部的计算后的样式加入页面中，两者组合在一块儿使你可以把样式表嵌入webpack打包后的JS文件中。

　　二、安装依赖项：

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

 　　三、修改webpack.config.js的module对象，引入多个loader（使webpack可以读取CSS读取文件格式并打包）

module: {
        rules: [
　　　　　　　//读取jsx和js格式的文件
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
　　　　　　  //读取css格式的文件
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }
                ]
            }
        ]
    }

 　　四、CSS module

　　　　做用：被称为CSS modules的技术意在把JS的模块化思想带入CSS中来，经过CSS模块，全部的类名，动画名默认都只做用于当前模块。Webpack对CSS模块化提供了很是好的支持，只须要在CSS loader中进行简单配置便可，而后就能够直接把CSS的类名传递到组件的代码中，这样作有效避免了全局污染

修改webpack.config.js的module对象

module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true, // 指定启用css modules
                            localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
                        }
                    }
                ]
            }
        ]
    }

 

 

 

 

5、插件（Plugins）

Webpack有不少内置插件，同时也有不少第三方插件，可让咱们完成更加丰富的功能

　　　一、Hot Module Replacement插件，是webpack里颇有用的一个插件，它容许你在修改组件代码后，自动刷新实时预览修改后的效果。

　　　　　　安装react-transform-hmr依赖项：

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

　　　　　　添加plugins对象：

plugins: [
        new webpack.HotModuleReplacementPlugin()//热加载插件
    ]

　　　　　　配置.babel文件

// .babelrc
{
  "presets": ["react", "env"],
  "env": {
    "development": {
    "plugins": [["react-transform", {
       "transforms": [{
         "transform": "react-transform-hmr",
         
         "imports": ["react"],
         
         "locals": ["module"]
       }]
     }]]
    }
  }

 

 

参照文本：http://www.jianshu.com/p/42e11515c10f