Webpack环境配置

创建并进入一个文件夹wepback:

  1. mkdir webpack && cd webpack

在webpack中创建一个src -> index.js

  1. mkdir src && touch src/index.js

初始化项目：

npm init这会提示你关于项目的更多细节，并创建一个 package.json 文件。

使用 -y 标记表示你能接受 package.json 文件的一堆：

  1. npm init -y

注意：项目名不要和包名相同，否则可能会出错误。

如果项目名和包名相同，修改Webpack -> package.json项目名

因为项目名与包名相同，所以修改项目名

  1. "name": "webpack-demo",

创建一个index.html，将下面代码放入

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Webpack</title>
  6. </head>
  7. <body>
  8.   <div id="root"></div>
  9.   <script src='dist/bundle.js'></script>
  10. </body>
  11. </html>

安装serve：

一个开发服务器，方便我们进行测试

  1. npm i serve -g

需要启动服务器时，serve会自动寻找index.html，如果文件名为其他需输入文件名

  1. serve [文件名]

安装webpack：

  1. npm install webpack@2.6.1 --save-dev

检测是否安装成功：

  1. ./node_modules/.bin/webpack --help

创建webpack.config.js

webpack的配置文件

  1. const path = require('path');
  2. //path是nodejs核心文件，用来解析路径
  3. //require会把入口文件相关的所有文件都打包
  4. module.exports = {
  5.    entry: './src/index.js',
  6.    //入口文件（打包相关文件）
  7.    output: {
  8.     //出口文件（打包到哪里）
  9.     path: path.resolve(__dirname, "build"),
  10.      //path：放在哪个文件夹
  11.      //path.resolve：进行拼接
  12.      //__dirname：命令行位置
  13.     filename: "bundle.js",
  14.     //文件名
  15.   }
  16. }

安装 babel 核心包，在webpack中装载的包

装包

  1. npm install babel-loader babel-core --save-dev

在webpack.config.js配置文件中添加ES6语法转换规则

添加在module（模块）的rules规则内

  1. module: {
  2.   //模块
  3.   rules: [
  4.   //规则
  5.     { test: /\.js$/, exclude: /node_modules/, use: "babel-loader" }
  6.     //test测试
  7.     //正则匹配js结尾的文件
  8.     //use使用babel-loader将es6处理成为es5语法
  9.   ]
  10. }

安装ES6 语法编译为 ES5 的包

装包

  1. npm install babel-preset-env --save-dev

安装语法加强包

  1. npm install --save-dev babel-preset-stage-0

创建.babelrc并配置：

  1. //自动加载的配置文件
  2. {
  3.   "presets": ["env","stage-0"]
  4.   //presets：需要启动什么样的预设转码
  5.   //env：可以对BABEL_ENV或者NODE_ENV指定的不同的环境变量，进行不同的编译操作
  6.   //stage-0：将ES7，ES6转换为ES5
  7. }

设置npm package快捷打包方式

修改packageage.json，设置一个命令npm run [名称]来启动这个打包工具

  1. "scripts": {
  2.   "build": "./node_modules/.bin/webpack"
  3. },

检查是否安装正确

修改src -> index.js

  1. let obj = {
  2.   name:'Liu',
  3.   age:24
  4. }
  5. let {age} = obj
  7. alert(age)

运行

  1. npm run build

在webpack下运行

  1. serve .

打开本地服务器

  1. localhost:5000

如果弹出对话框24说明安装成功

安装react包

  1. npm i react-dom --save
  2. npm i react --save

安装编译JSX语法包

  1. npm i babel-preset-react -D

配置.babelrc

  1. {
  2.   "presets": ["env","stage-0","react"]
  3.   //presets：需要启动什么样的预设转码
  4.   //env：可以对BABEL_ENV或者NODE_ENV指定的不同的环境变量，进行不同的编译操作
  5.   //stage-0：将ES7，ES6转换为ES5
  6.   //react：编译JSX语法
  7. }

检查是否能启动React项目

修改src -> index.js

  1. import React from 'react'
  2. import ReactDOM from 'react-dom'
  4. let obj = {
  5.   name:'Liu',
  6.   age:24
  7. }
  8. let {age} = obj
  10. alert(age)
  12. ReactDOM.render(<h1>{age}</h1>,document.getElementById('root'))

运行

  1. npm run build

在webpack下运行

  1. serve .

打开本地服务器

  1. localhost:5000

如果弹出对话框24说明安装成功

安装CSS包

  1. npm install --save-dev css-loader style-loader

在webpack.config.js配置文件中添加CSS语法转换模块规则

  1. {
  2.   test: /\.css$/,
  3.   //test测试
  4.   use: ["style-loader","css-loader"]
  5.   //use使用style-loader和css-loader编译css
  6.   //先使用后面的css-loader再使用前面的style-loader进行编译
  7. }

检查是否能启动React项目

修改src -> index.js
  1. import React from 'react'
  2. import ReactDOM from 'react-dom'
  3. import './index.css'
  5. ReactDOM.render(<h1>我是H1</h1>,document.getElementById('root'))
创建src -> index.css文件将下面代码放入
  1. *{
  2.   margin: 0;
  3.   padding: 0;
  4.   background: teal;
  5. }

运行

  1. npm run build

在webpack下运行

  1. serve .

打开本地服务器

  1. localhost:50000

弹出对话框24说明安装成功

安装CSS处理插件

  1. npm i postcss-loader -D
  1. {
  2.   test: /\.css$/,
  3.   use: ["style-loader","css-loader","postcss-loader"]
  4.   //添加上postcss
  5. }

CSS兼容

装包
  1. npm i -D autoprefixer cssnano
  2. //autoprefixer：兼容css包
  3. //cssnano：压缩css包
创建postcss的配置文件postcss.config.js
  1. module.exports = {
  2.   plugins: [
  3.     require("autoprefixer"),
  4.     //兼容css，less编译成css自动加前缀
  5.     require("cssnano")
  6.     //压缩css
  7.   ]
  8. }

后缀补齐功能

放在webpack.config.js的Module（模块）内

  1. resolve:{
  2.   extensions:[".js",".json",".jsx",".css"]
  3. },

自动调试功能

错误直接指向自己写的代码

放在webpack.config.js的Module（模块）内

  1. devtool:"source-map",

导入文件

装包

  1. npm install --save-dev file-loader

配置webpack.config.js文件

放在webpack.config.js的Module（模块）规则（rules）内

  1. { test: /\.(jpe?g|png)$/, use: 'file-loader' },
  2. //对导入图片后缀的配置

在output（出口文件）加一个公共的路径

  1. publicPath:"dist/"

检测一下

在index.js中导入一张图片

  1. npm run build

优化图片的test

在webpack.config.js中添加test

  1. { test: /\.(jpe?g|png)$/, use: 'file-loader?name=[name][hash:5].[ext]&outputPath=images/' }
  2. //name=[name][hash:5].[ext]：自动添加名称哈希值和后缀
  3. //outputPath：图片文件会自动保存在imgages文件夹下

压缩JS

在webpack.config.js中引用webpack

  1. const webpack = require('webpack')
  2. //path是nodejs核心文件，用来解析路径
  3. //require会把入口文件相关的所有文件都打包

在webpack.config.js的plugins中添加

  1. plugins: [
  2.   new webpack.optimize.UglifyJsPlugin({
  3.     compress: {
  4.       warnings: false,
  5.       drop_console: false,
  6.     }
  7.   })
  8. ]

压缩代码

添加在plugins中

  1. new webpack.DefinePlugin({
  2.   'process.env.NODE_ENV': '"production"',
  3. })
  4. //生产文件会导致source-map失效

CSS代码分离

会把CSS单独打包出来

装包

  1. npm install --save-dev extract-text-webpack-plugin

在webpack.config.js中引用extract-text-webpack-plugin

  1. const ExtractTextPlugin = require("extract-text-webpack-plugin")

在webpack.config.js中添加test

  1. {
  2.   test: /\.css$/,
  3.   use: ExtractTextPlugin.extract({
  4.     fallback: "style-loader",
  5.     use: ["css-loader","postcss-loader"]
  6.   })
  7. }

注意：把之前写的CSS的test删除

在webpack.config.js中添加插件（plugins）

  1. new ExtractTextPlugin("styles.css"),
  2. //添加生产文件

HTML代码分离

装包

  1. npm i html-webpack-plugin -D

在webpack.config.js中引用html-webpack-plugin

  1. const HtmlWebpackPlugin = require('html-webpack-plugin')

在webpack.config.js中添加test

  1. {
  2.   test: /\.css$/,
  3.   use: ExtractTextPlugin.extract({
  4.     fallback: "style-loader",
  5.     use: "css-loader"
  6.   })
  7. }

在webpack.config.js中添加插件(plugins)

  1. new HtmlWebpackPlugin(),
  2. //把publicPath删除，因为打包时自动生成路径

给HtmlWebpackPlugin增加一个模版文件

创建public -> index.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Webpack</title>
  6. </head>
  7. <body>
  8.   <div id="root"></div>
  9. </body>
  10. </html>
在webpack.config.js中修改插件(plugins)HtmlWebpackPlugin
  1. new HtmlWebpackPlugin({
  2.   template: 'public/index.html',
  3.   //模版文件地址
  4.   filename: 'index.html',
  5.   //生产的html文件名（默认为index.html）
  6.   //可以添加其他的配置选项，例如：title，minify，filename
  7. }),

所有的配置选项的github地址：点击进入

优化

修改webpack.config.js名称为webpack.prod.config.js

修改package.json的npm run命令

  1. "scripts": {
  2.     "build": "./node_modules/.bin/webpack --config webpack.prod.config.js",
  3.     //添加配置文件
  4.     "start": "./node_modules/.bin/webpack-dev-server --config webpack.dev.config.js"
  5.     //添加启动的服务器
  6.   },

完成开发环境的配置

装包（实时加载）

  1. npm install --save-dev webpack-dev-server

创建webpack.dev.config.js配置文件

黏贴下面代码（webpack.prod.config.js中代码修改）

  1. const path = require('path');
  2. const webpack = require('webpack')
  3. const HtmlWebpackPlugin = require('html-webpack-plugin')
  5. module.exports = {
  6.   entry: './src/index.js',
  7.   output: {
  8.     path: path.resolve(__dirname, "dist"),
  9.     filename: "bundle.js",
  10.     // publicPath:"dist/"
  11.   },
  12.   devtool:"source-map",
  13.   module: {
  14.     rules: [
  15.       { test: /\.js[x]?$/, exclude: /node_modules/, use: "babel-loader" },
  16.       { test: /\.css$/, use: ['style-loader',"css-loader",'postcss-loader'] },
  17.       { test: /\.(jpe?g|png)$/, use: 'file-loader' },
  18.     ]
  19.   },
  20.   plugins: [
  21.     new HtmlWebpackPlugin({
  22.       template: 'public/index.html'
  23.     }),
  24.   ]
  25. }

添加配置webpack.dev.config.js的模块(module)下

  1. devServer: {
  2.     port: 3000,
  3.     //端口修改为3000
  4.     hot:true
  5.     //热加载
  6.   },
热加载还需要配置webpack.dev.config.js的插件(Plugins)

添加热加载插件

  1. new webpack.HotModuleReplacementPlugin()

自动打开

装包

  1. npm i open-browser-webpack-plugin -D

在webpack.dev.config.js中引用open-browser-webpack-plugin插件

  1. const OpenBrowserWebpackPlugin = require('open-browser-webpack-plugin')

添加webpack.dev.config.js的插件(Plugins)

  1. new OpenBrowserWebpackPlugin({
  2.   //自动打开插件
  3.   url:'http://localhost:3000'
  4.   //自动打开的地址
  5. }),

检测是否成功

  1. npm start
  2. //npm run start

参考