底层建筑决定上层建筑，这是学习webpack的一些初步总结，配合react写了这么一个demo
目录构建如下
目录简要解析
src目录是程序所有的源代码common程序的公共资源component页面中的组件，每个组件用一个文件夹包起来以便管理维护dist是通过webpack打包后的输出目录assets打包后存放公共资源的地方index.html用来引用资源的入口app.js打包的入口文件data.js一堆模拟数据.babelrcbabel的配置文件postcss.config.jspostcss的配置文件webpack.config.jswebpack的配置文件
开发依赖和生产依赖
文件名 package.json
- 开发依赖
"devDependencies": { "autoprefixer": "^8.1.0", "babel-core": "^6.26.0", "babel-loader": "^7.1.3", "babel-preset-env": "^1.6.1", "babel-preset-react": "^6.24.1", "clean-webpack-plugin": "^0.1.19", "css-loader": "^0.28.10", "file-loader": "^1.1.9", "html-webpack-plugin": "^2.30.1", "postcss-loader": "^2.1.2", "style-loader": "^0.20.2", "url-loader": "^0.6.2", "webpack": "^3.11.0", "webpack-dev-server": "^2.11.1"},复制代码 - 生产依赖
"dependencies": { "prop-types": "^15.6.1", "react": "^16.2.0", "react-dom": "^16.2.0"}复制代码 - 配置运行脚本
"scripts": { "dev": "webpack", "start": "webpack-dev-server"}复制代码 配置babel（解决js的兼容问题）
文件名 .babelrc
{ "presets": ["env","react"]}复制代码 配置postcss（解决css的兼容问题）
文件名 postcss-loader
const Autoprefixer = require('autoprefixer')module.exports = { plugins: [ Autoprefixer() ]}复制代码 接下来就是配置webpack
之所以把webpack留到最后是为了方便阅读
文件名 webpack.config.js
const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin');module.exports = { entry: "./src/app.js", output: { path: path.resolve(__dirname,'dist'), filename: "assets/js/main.js" }, resolve: { // 设置模块默认路径 modules: [ "node_modules", path.resolve(__dirname,'src/common'), path.resolve(__dirname,'src/component') ] }, // 配置本地开发服务器 devServer: { open: true, port: 5552 }, plugins: [ // 改变输出路径和文件名 new HtmlWebpackPlugin({ filename: "index.html", template: "./src/index.html" }), // 如果是本地打包的话，每次都清空上一次编译好的文件 new CleanWebpackPlugin() ], module: { rules:[{ // 解析jsx和转换高版本的js test: /\.(js|jsx)$/, use: ["babel-loader"], include: [ path.resolve(__dirname,'src') ] },{ // 引入样式 test: /\.css$/, use: ["style-loader","css-loader","postcss-loader"], include: [ path.resolve(__dirname,'src') ] },{ // 引入图片 test: /\.(jpg|png|gif)$/, use: [ { loader: "url-loader", options: { limit: 3000, name: "assets/img/[name].[ext]" } } ] } ] }}复制代码 通过以上的配置，就可以正常在项目中引用图片、字体图标、样式
同时也可以使用es6的语法写react项目
密码：y3n9
demo运行方法： 在命令行进入该demo文件夹，使用命令npm install自动安装所有依赖 然后通过命令npm start启动webpack的本地服务器 等webpack打包完成后会自动打开浏览器显示项目效果。
需要注意的是：需要在ios系统上运行打包