webpack学习笔记

发布时间：2023-09-06 01:22责任编辑：白小东关键词：webpack

1. 全局安装webpack

cnpm install --save-dev webpack

2. 初始化

cnpm init

cnpm install --save-dev webpack

3. 配置文件 webpack.config.js

module.exports={ ???entry: __dirname+"/src/main.js", ???output: { ???????path: __dirname+"/dist", ???????filename: "bundle.js" ???}}

创建main.js文件

index.html 文件引入

<script src="dist/bundle.js"></script>

执行命令 webpack 即可生成list/bundle.js

4. babel配置

cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

webpack.config.js添加代码:

module: { ???rules: [ ???????{ ???????????test: /(\.jsx|\.js)$/, ???????????use: { ???????????????loader: "babel-loader", ???????????????options: { ???????????????????presets: ["es2015","react"] ???????????????} ???????????}, ???????????exclude: /node-modules/ ???????}, ???]},

测试:

src/js/a.js 代码：

var obj={ ???a: 3, ???b: 2, ???add() { ???????return this.a+this.b; ???}}export default obj;

main.js 引用：

import obj from "./js/a";console.log(obj.add());

执行 webpack ，启动浏览器查看

5. 构建服务器

配置:

devServer: { ???historyApiFallback: true, ???//不跳转 ???inline: true ????????????????//实时刷新}

package.json中的 scripts 添加：

"start": "webpack","server": "webpack-dev-server --open"

执行 npm start 生成bundle.js
执行 npm run server 启动服务器

修改index.html 文件引入路径

<!-- bundle.js在虚拟内存中，可以实时刷新 --><!-- dist/bundle.js是打包后才刷新 -->
<script src="bundle.js"></script>

6. css

cnpm install --save-dev style-loader css-loader

配置：

{ ???test: /\.css$/, ???use: [ ???????{ ???????????loader: "style-loader" ???????}, ???????{ ???????????loader: "css-loader" ???????} ???]},

src/css/style.css 代码：

html,body{ ???width: 100%; ???height: 100%; ???padding: 0; ???margin: 0; ???background-color: #ddd;}

main.js 引入：

import "./css/style.css";

7. sass

cnpm install --save-dev sass-loader

cnpm install node-sass

配置：

{ ???test: /\.scss$/, ???loader: ‘style-loader!css-loader!sass-loader‘},

src/scss/base.scss 代码：

body{ ???div{ ???????width: 200px; ???????height: 200px; ???????border: 1px solid #f69; ???????margin: 20px auto; ???????background: url("../images/1.png"); ???????&:hover{ ???????????box-shadow: 0px 0px 5px 6px #aaa; ???????} ???}}

main.js 引入：

import "./scss/base.scss";

8. image

cnpm install --save-dev url-loader

cnpm install --save-dev html-withimg-loader

配置：

{ ???test: /(\.png|\.jpg)$/, ???loader: "url-loader?limit=8192"},

a: js 中的图片引入

var imgUrl=require("./images/1.png");

b: html 中的图片

<img src="./src/images/1.png" alt="">

c: css中的图片

background: url("../images/1.png");

webpack学习笔记

原文地址：http://www.cnblogs.com/hsianglee/p/7781799.html

webpack学习笔记

知识推荐