从零开始学习webpack4---(更新中)

内容取自:https://www.valentinog.com/blog/webpack-4-tutorial/

1.创建项目文件夹(windows用户需要分别执行创建,然后cd到"webpack-4-quickstart")

  1. mkdir webpack-4-quickstart && cd $_

2.初始化package.json

  1. npm init -y


3.安装webpack和webpack-cli(webpack4中webpack-cli抽离出来了,需要分别安装)

windows用户尽量全局安装

npm install webpack webpack-cli -g

并设置环境变量

  1. npm i webpack webpack-cli --save-dev
查看webpack版本:
  1. webpack -v

4.创建入口文件,配置package.json 进行打包

webpack4中默认将./src/index.js 作为入口

创建./src/index.js文件,将如下内容复制进去!

  1. console.log(`I'm a silly entry point`);

在package.json中配置脚本

  1. "scripts": {
  2. "build": "webpack"
  3. }

执行命令:

  1. npm run build

提示编译成功,并会创建./dist/main.js

5.生产和开发模式

上面执行打包命令之后虽然没有报错,但是有一个警告!


'模式'选项尚未设置。将'模式'选项设置为'开发'或'生产'以启用此环境的默认值。

修改package.json中的脚本部分:

  1. "dev": "webpack --mode development",
  2. "build": "webpack --mode production"

然后执行打包命令:

  1. npm run dev
开发模式针对速度进行了优化,只不过是提供未缩小的捆绑包。
  1. npm run build

可以实现各种优化。包括缩小,范围提升,翻树等等。

6.覆盖默认入口出口配置

  1. "scripts": {
  2. "dev": "webpack --mode development ./foo/src/js/index.js --output ./foo/main.js",
  3. "build": "webpack --mode production ./foo/src/js/index.js --output ./foo/main.js"
  4. }

修改配置package.json文件,然后打包的时候会去找入口文件(./foo/src/js/index.js)并在./foo/main.js)输出。

7.使用babel编译ES6

现在许多都是用es6语法编写代码,webpack需要通过babel-loader 将es6以上的转为es5,以便浏览器可以解析。

要使用加载器,需要一些依赖。

  1. npm i babel-core babel-loader babel-preset-env --save-dev

然后需要创建一个文件(.babelrc)来配置babel


此时,有2种方法去配置babel-loader 

  • 使用webpack的配置文件
  • 在你的npm脚本中使用  --module-bind

虽然webpack4主打的是0conf概念,但我们可以不通过配置文件设置入口、出口和生产模式、开发模式。这就足够了,有些配置,我们还是需要通过webpack.config.js  来完成。

1.在项目根目录创建webpack.config.js,输入一下内容

  1. module.exports = {
  2. module: {
  3. rules: [
  4. {
  5. test: /\.js$/,
  6. exclude: /node_modules/,
  7. use: {
  8. loader: "babel-loader"
  9. }
  10. }
  11. ]
  12. }
  13. };

然后在index.js中写入一些ES6的代码

  1. const arr = [1, 2, 3];
  2. const iAmJavascriptES6 = () => console.log(...arr);
  3. window.iAmJavascriptES6 = iAmJavascriptES6;

然后执行

  1. npm run build

在./dist/main.js中可以看到代码已被编译为es5语法。

2.如果不通过webpack的配置文件,可以直接修改package.json来完成同样的操作。(webpack3也可以)

  1. "scripts": {
  2. "dev": "webpack --mode development --module-bind js=babel-loader",
  3. "build": "webpack --mode production --module-bind js=babel-loader"
  4. }

8.通过React设置webpack

1.安装React

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

2.安装babel-preset-react

  1. npm i babel-preset-react --save-dev

3.配置.babelrc:

  1. {
  2. "presets": ["env", "react"]
  3. }

4.修改webpack.config.js配置加载器

  1. module.exports = {
  2. module: {
  3. rules: [
  4. {
  5. test: /\.(js|jsx)$/,
  6. exclude: /node_modules/,
  7. use: {
  8. loader: "babel-loader"
  9. }
  10. }
  11. ]
  12. }
  13. };

5.添加React组件

创建./src/App.js

  1. import React from "react";
  2. import ReactDOM from "react-dom";
  3. const App = () => {
  4. return (
  5. <div>
  6. <p>React here!</p>
  7. </div>
  8. );
  9. };
  10. export default App;
  11. ReactDOM.render(<App />, document.getElementById("app"));

并在index.js中引入

  1. import App from "./App";

然后运行“npm run build”

9.HTML webpack 插件

1.安装依赖

  1. npm i html-webpack-plugin html-loader --save-dev

2.编辑修改webpack的配置文件(webpack.config.js)

  1. const HtmlWebPackPlugin = require("html-webpack-plugin");
  2. module.exports = {
  3. module: {
  4. rules: [
  5. {
  6. test: /\.js$/,
  7. exclude: /node_modules/,
  8. use: {
  9. loader: "babel-loader"
  10. }
  11. },
  12. {
  13. test: /\.html$/,
  14. use: [
  15. {
  16. loader: "html-loader",
  17. options: { minimize: true }
  18. }
  19. ]
  20. }
  21. ]
  22. },
  23. plugins: [
  24. new HtmlWebPackPlugin({
  25. template: "./src/index.html",
  26. filename: "./index.html"
  27. })
  28. ]
  29. };

3.创建html文件./src/index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>webpack 4 quickstart</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9. </div>
  10. </body>
  11. </html>

4.执行

  1. npm run build

查看./dist/index.html ,并通过浏览器打开。

在处理HTML方面没有任何改变。

webpack 4仍然是一个针对Javascript的模块打包器。

但是有计划将HTML作为模块添加(HTML作为入口点)。

10.压缩CSS文件

extract-text-webpack-plugin  不能与webpack 4一起使用。请改用mini-css-extract-plugin。

确保将webpack更新到版本4.2.0。否则,mini-css-extract-plugin将无法使用!

1.安装依赖

  1. npm i mini-css-extract-plugin css-loader --save-dev

2.创建./src/main.css

/* */
/* CREATE THIS FILE IN ./src/main.css */
/* */
body {
line-height: 2;
background-color: chocolate;
}

3.配置webpack.config.js

const HtmlWebPackPlugin = require( "html-webpack-plugin");
const MiniCssExtractPlugin = require( "mini-css-extract-plugin");
module. exports = {
module: {
rules: [
{
test: / \. ( js | jsx ) $ /,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: / \. html $ /,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: / \. css $ /,
use: [ MiniCssExtractPlugin. loader, "css-loader"]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
};

4.引用css文件

import style from "./main.css";


运行 "npm run build" 并查看./dist  文件夹。你应该看到由此产生的CSS!

11.webpack dev服务器

使用webpack配置开发服务器只需一分钟。

一旦配置好的webpack dev服务器将在浏览器中启动你的应用程序。

每次更改文件时,它都会自动刷新浏览器的窗口。

要设置webpack dev服务器,请使用以下命令安装软件包:

  1. npm i webpack-dev-server --save-dev
修改webpack配置文件

  1. "scripts": {
  2. "start": "webpack-dev-server --mode development --open",
  3. "build": "webpack --mode production"
  4. }
注意:start必须放在build之前,否则会报错。

然后执行

  1. npm run start







评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值