本文共 6223 字,大约阅读时间需要 20 分钟。
script
标签静态引入,js文件之间由于没有强依赖关系,如果文件1要用到文件2的某些方法或变量,则必须将文件1放到文件2后面加载。 ES2015 import
方法
CommonJs require()
方法
AMD define
和 require
语法
css/sass/less文件中的 @import 语法
url(...)
和 <img src=...>
中的图片路径
./src/index.js
,或者我们可以在配置文件中配置。entry可以为一个也可以为多个。 module.exports = { entry: './src/index.js' }
module.exports = { entry: { main: './src/index.js' } };
module.exports = { entry: ['./src/index.js', './src/index2.js', './src/index3.js'] }
module.exports = { entry: { app: './src/app.js', admin: './src/admin.js' } };
./dist/main.js
。同样,我们可以在配置文件中配置output: module.exports = { entry: './src/index.js', output: { path: __dirname + '/dist', filename: 'bundle.js' } };
module.exports = { entry: { app: './src/app.js', search: './src/search.js' }, output: { filename: '[name].js', path: __dirname + '/dist' } }
./dist
路径下面会生成 app.js
和 search.js
两个bundle文件。 module.exports = { module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] } };
test
定义了需要被转化的文件或者文件类型, use
定义了对该文件进行转化的loader的类型。该条配置相当于告诉webpack当遇到一个txt文件的引用时(使用require或者import进行引用),先用 raw-loader
转换一下该文件再把它打包进bundle。 css-loader
,加载图片和字体文件的 file-loader
,加载html文件的 html-loader
,将最新JS语法转换成ES5的 babel-loader
等等。完整列表请参考 webpack loaders 。 const webpack = require('webpack'); // 用于引用webpack内置插件 const HtmlWebpackPlugin = require('html-webpack-plugin'); // 外部插件 module.exports = { plugins: [ new webpack.HotModuleReplacementPlugin(), new HtmlWebpackPlugin({template: './src/index.html'}) ] };
react-webpack-starter
项目并使用 npm init
初始化。 npm i react react-dom
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin style-loader css-loader
webpack-cli
后可以在命令行中执行webpack命令; webpack-dev-server
提供了简易的web服务器,并且在修改文件之后自动执行webpack的编译操作并自动刷新浏览器,省去了重复的手动操作; html-webpack-plugin
用于自动生成 index.html
文件,并且在 index.html
中自动添加对bundle文件的引用; style-loader
和 css-loader
用于加载css文件。 class
, import
这样的es6的语法,为了提高网站的浏览器兼容性,我们需要用babel转换一下。 npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader
@babel/core
是babel的核心模块,包含了babel的核心功能; @babel/preset-env
支持转换ES6以及更新的js语法,并且可根据需要兼容的浏览器类型选择加载的plugin从而精简生成的代码; @babel/preset-react
包含了babel转换react所需要的plugin; babel-loader
是webpack的babel加载器。 webpack.config.js
,内容如下: const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [ { test: /\.js$/, exclude: /node_module/, use: 'babel-loader' }, { test: /\.css$/, use: ['style-loader', 'css-loader'] // 注意排列顺序,执行顺序与排列顺序相反 } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }
HtmlWebpackPlugin
使用自定义的模版来生成html 文件,模版的内容如下: My React App
.babelrc
文件,配置我们安装的两个babel preset: { "presets": [ "@babel/preset-env", "@babel/preset-react" ] }
import React from 'react'; import ReactDOM from 'react-dom'; import App from './components/App'; ReactDOM.render(, document.getElementById('app'));
import React, { Component } from 'react'; import './App.css'; export default class App extends Component { render() { return (my react webpack starter) } }
body{ font-size: 60px; font-weight: bolder; color: red; text-transform: uppercase; }
package.json
package.json
文件里面加上两个scripts,用来运行开发服务器和打包: "scripts": { "start": "webpack-dev-server --mode development --open --hot", "build": "webpack --mode production" }
webpack-dev-server
的模块热更新功能( HMR ),进一步提高我们的开发效率。 转载地址:http://cyfpi.baihongyu.com/