webpack的使用

Webpack的工作方式

把你的项目当做一个整体，通过一个给定的主文件（如：index.js），
Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理
它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

安装webpack及相关组件

• 安装常用模块

npm init  //初始化npm install --save-dev webpack //安装webpacknpm install --save-dev webpack-dev-server //安装本地服务npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react //安装es6，jsx等解析包npm install --save-dev style-loader css-loader //安装处理样式文件的包

• 安装需要的前端框架

npm install --save react react-dom //安装react组件import React from 'react';import ReactDOM from 'react-dom';  //在main.js文件中导入reactnpm install jquery --save  //安装jQuery组件import $ from 'jquery';  //在main.js文件导入jQuery

根目录所有文件

• 在根目录存在的文件和文件夹有：

package.json //项目配置文件webpack.config.js //关于打包信息的配置文件.babelrc //关于babel的配置文件node_modules //所有依赖的包文件src //开发所有的html，css，js，image文件

打包的配置文件

module.exports = {  devtool: 'eval-source-map',////调试工具  entry:  __dirname + "/js/main.js",////入口文件  output: {     ////出口文件    path: __dirname + "/js",    filename: "[name].bundle.js"  },  devServer: {////本地服务器配置    contentBase: "./public",//目录    historyApiFallback: true,//不跳转    inline: true//实时刷新  },  module: {       rules: [            {                test: /(\.jsx|\.js)$/,                use: {                    loader: "babel-loader"                },                exclude: /node_modules/            },            {                test: /\.css$/,                use: [                    {                        loader: "style-loader"                    },                    {                        loader: "css-loader",                        options: {                                  modules: true                                  }                    }                ]            }        ]    }}

• 在使用过程中，根据自己需要修改配置文件的入口和出口
• 然后在main.js中合理引用js模块将所有js文件打包成一个js文件供html文件调用
• 至于其他项目文件不用动它，以后有需要在打包样式文件
• 使用webpack –watch命令进行热更新，修改保存之后自动打包便于调试