webpack的基本使用
什么是webpack？
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
webpack核心概念
- 入口(entry):
指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始 - 输出(output):
告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这 些文件，默认值为 ./dist - loader:
让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。 - 插件(plugins)：
被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
创建react + webpack打包实例
- 目录结构为
-
npm init -y//初始化package.json 文件，即包管理文件npm init -y//初始化package.json 文件，即包管理文件 -
npm i -S react react-dom//安装react react-dom依赖; - 打开文件，在项目根目录下新建 webpack.config.js 这个文件，配置如下，记得去加载文件中用到的loader依赖；
`const path = require('path'); //引入node下面的paht 模块，用于处理文件与目录的路径
const HtmlWebpackPlugin = require('html-webpack-plugin');//编译html文件保存到bundle里
e里
module.exports = { = {
entry:"./src/rc/app.js",
",
output:{
path:th:path.resolve(__d(__dirname,'dist'),
filename:"e:"abb.js"//输"//输出的文件名
},
mode:"development",//模式：开发、生产、无模式，此处为开发模式
plugins:[
new HtmlWebpackPlugin({
filename:"e:"index.html",//",//所要编译的html文件
template:"src/rc/index.html"//所"//所要编译的html文件的模板
})
],
module: {//loader模块
rules: [
{ test: /\.js$/,//以.js结尾的文件
use: [{
loader:"babel-loader",//使用babel-loader来编译
options:{
presets:["react"]
}
}
]
},
{
test: /\.css$/,
use: ["style-loader","css-loader"]
},
{
test: /\.jpg$/,
use: ["file-loader"]
}
]
},
devServer:{//本地开发的前端服务器，用以调试用
open:true,//自动打开浏览器
port:9999//启动的端口号
}
}
- package.json文件为
{
"name": "webpack2",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --config webpack.config.js",//npm run dev 文件会自动找webpack对应的文件，并执行
"start": "webpack-dev-server --config webpack.config.js"//npm run start 即可在前端服务器环境下访问打包好的文件
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-react": "^6.24.1",
"css-loader": "^1.0.0",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.1",
"webpack": "^4.23.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
},
"dependencies": {
"react": "^16.6.0",
"react-dom": "^16.6.0"
}
}
第一次写博文，码字不易，多多鼓励！
webpack官网：
[1]: https://www.webpackjs.com/concepts/