安装和使用webpack1.初始化项目mkdir react-redux && cd react-reduxnpm init -y2.安装webpacknpm i webpack -Dnpm i -D 是 npm install --save-dev 的简写，是指安装模块并保存到 package.json 的 devDependencies中，主要在开发环境中的依赖包.如果使用webpack 4+ 版本，还需要安装 CLI。npm install -D webpack webpack-cli3.新建一下项目结构 react-redux |- package.json+ |- /dist+ |- index.html |- /src |- index.jsindex.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="root"></div><script src="bundle.js"></script></body></html>index.jsdocument.querySelector('#root').innerHTML = 'webpack使用';非全局安装下的打包。node_modules\.bin\webpack src\index.js --output dist\bundle.js --mode development打开dist目录下的html显示webpack使用配置webpack1.使用配置文件const path=require('path');module.exports={ entry:'./src/index.js', output:{ filename:'bundle.js', path:path.resolve(__dirname,'dist') }};运行命令: node_modules\.bin\webpack --mode production 可以以进行打包2.NPM 脚本(NPM Scripts)在在 package.json 添加一个 npm 脚本(npm script)："build": "webpack --mode production"运行npm run build即可打包使用webpack构建本地服务器webpack-dev-server 提供了一个简单的 web 服务器，并且能够实时重新加载。 1.安装 npm i -D webpack-dev-server修改配置文件webpack.config.jsconst path=require('path');module.exports={ entry:'./src/index.js', output:{ filename:'bundle.js', path:path.resolve(__dirname,'dist') }, //以下是新增的配置 devServer:{ contentBase: "./dist",//本地服务器所加载的页面所在的目录 historyApiFallback: true,//不跳转 inline: true,//实时刷新 port:3000, open:true,//自动打开浏览器 }};运行webpack-dev-server --progress,浏览器打开localhost:3000,修改代码会实时显示修改的结果.添加scripts脚本,运行npm start自动打开http://localhost:8080/"start": "webpack-dev-server --open --mode development" 启动webpack-dev-server后，在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。因此使用webpack-dev-server进行开发的时候都看不到编译后的文件 2.热更新 配置一个webpack自带的插件并且还要在主要js文件里检查是否有module.hotplugins:[ //热更新,不是刷新 new webpack.HotModuleReplacementPlugin() ],在主要js文件里添加以下代码if (module.hot){ //实现热更新 module.hot.accept();}在webpack.config.js中开启热更新devServer:{ contentBase: "./dist",//本地服务器所加载的页面所在的目录 historyApiFallback: true,//不跳转 inline: true,//实时刷新 port:3000, open:true,//自动打开浏览器 hot:true //开启热更新 },热更新允许在运行时更新各种模块，而无需进行完全刷新.配置Html模板1.安装html-webpack-plugin插件npm i html-webpack-plugin -D2.在webpack.config.js里引用插件const path=require('path');let webpack=require('webpack');let HtmlWebpackPlugin=require('html-webpack-plugin');module.exports={ entry:'./src/index.js', output:{ //添加hash可以防止文件缓存,每次都会生成4位hash串 filename:'bundle.[hash:4].js', path:path.resolve('dist') }, //以下是新增的配置 devServer:{ contentBase: "./dist",//本地服务器所加载的页面所在的目录 historyApiFallback: true,//不跳转 inline: true,//实时刷新 port:3000, open:true,//自动打开浏览器 hot:true //开启热更新 }, plugins:[ new HtmlWebpackPlugin({ template:'./src/index.html', hash:true, //会在打包好的bundle.js后面加上hash串 }) ]};运行npm run build进行打包,这时候每次npm run build的时候都会在dist目录下创建很多打好的包.应该每次打包之前都将dist目录下的文件清空,再把打包好的文件放进去,这里使用clean-webpack-plugin插件.通过npm i clean-webpack-plugin -D命令安装.然后在webpack.config.js中引用插件.const path=require('path');let webpack=require('webpack');let HtmlWebpackPlugin=require('html-webpack-plugin');let CleanWebpackPlugin=require('clean-webpack-plugin');module.exports={ entry:'./src/index.js', output:{ //添加hash可以防止文件缓存,每次都会生成4位hash串 filename:'bundle.[hash:4].js', path:path.resolve('dist') }, //以下是新增的配置 devServer:{ contentBase: "./dist",//本地服务器所加载的页面所在的目录 historyApiFallback: true,//不跳转 inline: true,//实时刷新 port:3000, open:true,//自动打开浏览器 hot:true //开启热更新 }, plugins:[ new HtmlWebpackPlugin({ template:'./src/index.html', hash:true, //会在打包好的bundle.js后面加上hash串 }), //打包前先清空 new CleanWebpackPlugin('dist') ]};之后打包便不会产生多余的文件.编译es6和jsx1.安装babelnpm i babel-core babel-loader babel-preset-env babel-preset-react babel-preset-stage-0 -Dbabel-loader: babel加载器babel-preset-env : 根据配置的 env 只编译那些还不支持的特性。babel-preset-react: jsx 转换成js2.添加.babelrc配置文件{ "presets": ["env", "stage-0","react"] //从左向右解析}3.修改webpack.config.jsconst path=require('path');module.exports={ entry:'./src/index.js', output:{ filename:'bundle.js', path:path.resolve(__dirname,'dist') }, //以下是新增的配置 devServer:{ contentBase: "./dist",//本地服务器所加载的页面所在的目录 historyApiFallback: true,//不跳转 inline: true//实时刷新 }, module:{ rules:[ { test:/\.js$/, exclude:/(node_modules)/, //排除掉nod_modules,优化打包速度 use:{ loader:'babel-loader' } } ] }};开发环境与生产环境分离1.安装webpack-mergenpm install --save-dev webpack-merge2.新建一个名为webpack.common.js文件作为公共配置,写入以下内容：const path=require('path');let webpack=require('webpack');let HtmlWebpackPlugin=require('html-webpack-plugin');let CleanWebpackPlugin=require('clean-webpack-plugin');module.exports={ entry:['babel-polyfill','./src/index.js'], output:{ //添加hash可以防止文件缓存,每次都会生成4位hash串 filename:'bundle.[hash:4].js', path:path.resolve(__dirname,'dist') }, plugins:[ new HtmlWebpackPlugin({ template:'./src/index.html', hash:true, //会在打包好的bundle.js后面加上hash串 }), //打包前先清空 new CleanWebpackPlugin('dist'), new webpack.HotModuleReplacementPlugin() //查看要修补(patch)的依赖 ], module:{ rules:[ { test:/\.js$/, exclude:/(node_modules)/, //排除掉nod_modules,优化打包速度 use:{ loader:'babel-loader' } } ] }};3.新建一个名为webpack.dev.js文件作为开发环境配置const merge=require('webpack-merge');const path=require('path');let webpack=require('webpack');const common=require('./webpack.common.js');module.exports=merge(common,{ devtool:'inline-soure-map', mode:'development', devServer:{ historyApiFallback: true, //在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html contentBase:path.resolve(__dirname, '../dist'),//本地服务器所加载的页面所在的目录 inline: true,//实时刷新 open:true, compress: true, port:3000, hot:true //开启热更新 }, plugins:[ //热更新,不是刷新 new webpack.HotModuleReplacementPlugin(), ],});4.新建一个名为webpack.prod.js的文件作为生产环境配置 const merge = require('webpack-merge'); const path=require('path'); let webpack=require('webpack'); const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); const common = require('./webpack.common.js'); module.exports = merge(common, { mode:'production', plugins: [ new UglifyJSPlugin() ] });配置react1.安装react、react-domnpm i react react-dom -S2.新建App.js,添加以下内容.import React from 'react';class App extends React.Component{ render(){ return (<div>佳佳加油</div>); }}export default App;3.在index.js添加以下内容.import React from 'react';import ReactDOM from 'react-dom';import {AppContainer} from 'react-hot-loader';import App from './App';ReactDOM.render( <AppContainer> <App/> </AppContainer>, document.getElementById('root'));if (module.hot) { module.hot.accept();}4.安装react-hot-loader npm i -D react-hot-loader 5.修改配置文件在 webpack.config.js 的 entry 值里加上 react-hot-loader/patch，一定要写在entry 的最前面，如果有 babel-polyfill 就写在babel-polyfill 的后面 6.在 .babelrc 里添加 plugin,"plugins": ["react-hot-loader/babel"]处理SASS1.安装style-loader css-loader url-loader npm install style-loader css-loader url-loader --save-dev 2.安装sass-loader node-sass npm install sass-loader node-sass --save-dev 3.安装mini-css-extract-plugin,提取单独打包css文件 npm install --save-dev mini-css-extract-plugin 4.配置webpack配置文件 webpack.common.js{ test:/\.(png|jpg|gif)$/, use:[ "url-loader" ]},webpack.dev.js{ test:/\.scss$/, use:[ "style-loader", "css-loader", "sass-loader" ]}webpack.prod.js const merge = require('webpack-merge'); const path=require('path'); let webpack=require('webpack'); const MiniCssExtractPlugin=require("mini-css-extract-plugin"); const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); const common = require('./webpack.common.js'); module.exports = merge(common, { mode:'production', module:{ rules:[ { test:/\.scss$/, use:[ // fallback to style-loader in development process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader, "css-loader", "sass-loader" ] } ] }, plugins: [ new UglifyJSPlugin(), new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // both options are optional filename: "[name].css", chunkFilename: "[id].css" }) ] });
