Webpack的工作方式
把你的项目当做一个整体,通过一个给定的主文件(如:index.js),
Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理
它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。
安装webpack及相关组件
- 安装常用模块
npm init //初始化
npm install --save-dev webpack //安装webpack
npm 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文件中导入react
npm 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命令进行热更新,修改保存之后自动打包便于调试