分类导航

Webpack学习笔记

发布时间:2019-11-07 发布网站:大佬教程
大佬教程收集整理的这篇文章主要介绍了Webpack学习笔记大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

写过 React ,用的是 create-react-app ,写过 Vue ,用的是 vue-cli,第一次想了解一下 Webpack 。

我的环境 Mac OS,node: v8.11.1,npm: 5.6.0,Webpack: .12.0

0. 什么是Webpack

我就不说乱七八糟的术语了,就是把很多的 JS 文件打包到一个文件(当然也可能不止一个)的工具,方便我们写模块化的 JS 代码。而通过一些 plugin 和 loader 可能提供一些其他有用的功能以及处理其他格式的文件。

1. 简单的应用

先创建一个文件夹,在终端运行命令   来创建一个   文件,这个文件用来描述项目信息,随便填或者一直回车就可以。

package.json

"name": "webpack-study-note-1""version": "1.0.0""description": "webpack学习笔记""main": "index.js""scripts""test": "echo \"Error: no test specified\" && exit 1""repository": "https://github.com/G-lory/front-end-practice/tree/master/webpack/study-notes""author": "G-lory""license": "ISC"

先建一个 src 文件夹用来 js 源文件。创建两个 js 文件。

const foo = require('./others.js'let app = document.getElementById('app'<span style="color: #000000;">);
<span style="color: #0000ff;">for
(let i = 0; i < 10; i++<span style="color: #000000;">) {
let p = document.createElement('p'<span style="color: #000000;">);
p.innerText =<span style="color: #000000;"> foo(i);
app.appendChild(p);
}

<span style="color: #008000;">//<span style="color: #008000;"> others.js
<span style="color: #0000ff;">function<span style="color: #000000;"> foo(idx) {
<span style="color: #0000ff;">return the ${idx + 1<span style="color: #000000;"&gt;}th row;
}

module.exports = foo;

并在根目录创建 index.html

webpack study notes

目录结构是这样的:

├── src
│ ├── index.js
│ └── others.js
├── index.html
└── package.json

如果想在 index.html 引用所有的js文件,就要通过标签将js文件全部导入,而且还要注意顺序。现在通过 module.exports 和 require 在JS中引用,然后把这些文件打包成一个文件,那么 index.html 直接引用最终的那个 js 文件就可以了。

首先安装 Webpack 。这里使用 Webpack3 版本3到4有很多变化,如果你用的4,基本就不用看下去了。

安装命令:  webpack@ --save-dev 

其中 install 可简写为 i, --save-dev 可简写为 -D,表示仅在开发环境依赖,会在package.json的 devDependencies 字段记录 。相对的是 --save 表示运行时依赖,简写为 -S, 会在package.json的 dependencies 字段记录。@3 表示指定安装版本。

项目下会生成一个 node_modules 文件夹。里面是安装的依赖包。不用去管这个文件夹。

然后在根目录下创建 webpack.config.js 文件。这是webpack默认的配置文件名。这个文件其实就是一个普通的 js 脚本文件,可以通过require引用一些模块,最后导出配置对象。

path = require('path'); ='./src/index.js', path: path.resolve(__dirname,'dist''bundle.js'

一个最简单的配置文件,指定了输入输出。输入和输出都可以指定多个,这里暂时用不到。

在 package.json 中添加打包命令

"scripts""build": "webpack"

然后在命令行执行   就可以进行打包了,会生成文件 /dist/bundle.js 。

Webpack学习笔记

打开文件可以看到,前面是 webpack 生成的一些代码,后面就是 index.js 和 others.js 中的代码。

然后在 index.html 中引用文件

在浏览器打开 index.html 文件 正常运行。

完整代码见: https://github.com/G-lory/front-end-practice/tree/master/webpack/study-notes/step1

2. 使用 loader 和 plugin

我的个人感觉,loader就是处理文件的,先使用loader将文件转换成想要的样子,比如Webpack默认不能处理的图片要先使用file-loader处理,es6先使用babel-loder处理成es5防止浏览器不兼容等等。

而 plugin 可以做一些其他的神奇而且很有用的事情(我在说什么……

之前的代码使用的ES6,现在就尝试下把它转换成ES5,需要使用 babel-loader。

安装:

npm install babel-loader@7 babel-core babel-preset-env -D

注意这里为了和webapck3兼容,需要指定 babel-loader 版本。

然后修改 webpack 配置文件。这里 babel 的配置含义可见 https://segmentfault.com/a/1190000008159877

path = require('path'module.exports =<span style="color: #000000;"> {
entry:
'./src/index.js',<span style="color: #008000;">//<span style="color: #008000;"> 入口
<span style="color: #000000;">
output: { <span style="color: #008000;">//<span style="color: #008000;"> 出口
path: path.resolve(__dirname,filename: 'bundle.js'<span style="color: #000000;">
},module: { <span style="color: #008000;">//<span style="color: #008000;"> 配置loader
<span style="color: #000000;"> rules: [
{
test: /.jsx?/,<span style="color: #008000;">//<span style="color: #008000;"> 正则表达式 匹配文件名
exclude: /node_modules/,<span style="color: #008000;">//<span style="color: #008000;"> exclude 表示排除的路径 也可以添加 include 字段设置匹配路径
<span style="color: #000000;"> use: {
loader: 'babel-loader',<span style="color: #008000;">//<span style="color: #008000;"> 对符合上面约束条件的文件 使用的 loader
<span style="color: #000000;"> options: {
presets: ['env'<span style="color: #000000;">]
}
}
}
]
}
}

babel 默认是不进行转换的,需要设置插件,这里通过 presets 设置插件指定代码的转换规则。

再次执行 npm run build 可以看到 bundle.js 中 let 都变成了 var。说明 babel 生效了。

接下来在再试一下 Promise。

修改 JS 代码

const foo = require('./others.js'let app = document.getElementById('app'<span style="color: #000000;">);
<span style="color: #0000ff;">for
(let i = 0; i < 10; i++<span style="color: #000000;">) {
let p = document.createElement('p'<span style="color: #000000;">);
foo(i).then(content =><span style="color: #000000;"> {
p.innerText =<span style="color: #000000;"> content;
app.appendChild(p);
})
}
<span style="color: #008000;">//<span style="color: #008000;"> others.js
<span style="color: #0000ff;">function<span style="color: #000000;"> foo(idx) {
<span style="color: #0000ff;">return <span style="color: #0000ff;">new Promise(<span style="color: #0000ff;">function<span style="color: #000000;"> (resolve,reject) {
resolve(the ${idx </span>+ 1<span style="color: #000000;"&gt;}th row);
})
}

module.exports = foo;

打包后发现 Promise 相关带并没有进行处理。原来上面的配置只能转换ES的新语法,对于新的API(Promise、Set、Map 等新增对象,Object.assign、Object.entries等静态方法。)却没有作用。

有两种方式解决这个问题,babel-polyfill 或 babel-runtime,前者默认全部加载,后者是按需加载。这么说好像有错....可以阅读 https://juejin.im/post/5a96859a6fb9a063523e2591

安装:

npm install babel-plugin-transform-runtime -D

然后修改 babel 配置

/\.js$/, exclude: /node_modules/, 'babel-loader', 'env''transform-runtime'

现在再打包试一下会发现 bundle.js 文件的体积大了一些 那是多了 Promise 的 polyfill,打开 bundle.js 能看到相关代码。

上面是 loader 的使用,再试一下 plugin 的使用。

html-webpack-plugin 可以生成一个 html 文件,把生成的 js 文件自动注入其中。

安装

npm install html-webpack-plugin -D

在配置文件中添加 plugins 字段

path = require('path' HtmlWebpackPlugin = require('html-webpack-plugin'module.exports =<span style="color: #000000;"> {
<span style="color: #008000;">//
<span style="color: #008000;"> ...

<span style="color: #000000;"> plugins: [
<span style="color: #0000ff;">new<span style="color: #000000;"> HtmlWebpackPlugin({
filename: 'index.html',<span style="color: #008000;">//<span style="color: #008000;"> 生成文件名
template: 'index.html' <span style="color: #008000;">//<span style="color: #008000;"> 模板
<span style="color: #000000;"> })
]
}

现在可以把 /index.js 中引入 js 的语句删除了,然后重新打包。

可以看到dist文件夹生成了一个 index.html 文件,该文件中引入了 js。

完整代码见: https://github.com/G-lory/front-end-practice/tree/master/webpack/study-notes/step2

3. 使用 Webpack 打包 React

react 使用的是 jsx 语法,需要用 babel 将 jsx 转换成 js。

首先安装 React

npm install react react-dom --save

然后安装 babel 转换 react 文件的插件

npm i babel-preset-react -D

在 src 文件夹的文件改为下面几个文件:

index.jsx

import React from 'react''react-dom''./input''./list'class App extends React.Component {

constructor(props) {
    super(props);
    </span><span style="color: #0000ff;"&gt;this</span>.state =<span style="color: #000000;"&gt; {
        list: []
    };
}

addItem(item) {
    </span><span style="color: #0000ff;"&gt;this</span><span style="color: #000000;"&gt;.setState({
        list: </span><span style="color: #0000ff;"&gt;this</span><span style="color: #000000;"&gt;.state.list.concat(item)
    })
}

removeItem(idx) {
    </span><span style="color: #0000ff;"&gt;this</span><span style="color: #000000;"&gt;.setState({
        list: </span><span style="color: #0000ff;"&gt;this</span>.state.list.filter((it,id) => id !==<span style="color: #000000;"&gt; idx)
    })
}


render() {
    </span><span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt;(
      </span><div className='todoList'>
          <Input handleSubmit={<span style="color: #0000ff;"&gt;this</span>.addItem.bind(<span style="color: #0000ff;"&gt;this</span>)} />
          <List list={<span style="color: #0000ff;"&gt;this</span>.state.list} handleRemove={<span style="color: #0000ff;"&gt;this</span>.removeItem.bind(<span style="color: #0000ff;"&gt;this</span>)} />
      </div>

<span style="color: #000000;"> )
}
}

render(,document.getElementById('app'));

input.jsx

import React,{ Component } from 'react'class Input extends Component {
constructor(props) {
super(props);
<span style="color: #0000ff;">this
.state =<span style="color: #000000;"> {
content:
''<span style="color: #000000;">
};
}
submit() {
<span style="color: #0000ff;">if (<span style="color: #0000ff;">this.state.content === '') <span style="color: #0000ff;">return<span style="color: #000000;"> ;
<span style="color: #008000;">//<span style="color: #008000;"> 提交数据并清空
<span style="color: #0000ff;">this.props.handleSubmit(<span style="color: #0000ff;">this<span style="color: #000000;">.state.content);
<span style="color: #0000ff;">this<span style="color: #000000;">.setState({
content: ''<span style="color: #000000;">
})
}
handleChange(e) {
<span style="color: #0000ff;">this<span style="color: #000000;">.setState({
content: e.target.value
})
}
render() {
<span style="color: #0000ff;">return<span style="color: #000000;"> (

<={={.handleChange.bind( </span>> </textarea> </p> <p className='btn'> <button onClick={<span style="color: #0000ff;"&gt;this</span>.submit.bind(<span style="color: #0000ff;"&gt;this</span>)}>提交</button> </p> </div>

<span style="color: #000000;"> )
}
}

export <span style="color: #0000ff;">default Input;

list.jsx

import React,{ Component } from 'react'class List extends Component {
render() {
<span style="color: #0000ff;">return
<span style="color: #000000;"> (
<span style="color: #000000;">
{
<span style="color: #0000ff;">this.props.list.map((item,idx) =>

{item}
export <span style="color: #0000ff;">default List;

然后修改 webpack.config.js

path = require('path' HtmlWebpackPlugin = require('html-webpack-plugin'module.exports =<span style="color: #000000;"> {
entry:
'./src/index.jsx',<span style="color: #008000;">//
<span style="color: #008000;"> 对符合上面约束条件的文件 使用的 loader

<span style="color: #000000;"> options: {
presets: ['env','react'<span style="color: #000000;">],plugins: ['transform-runtime'<span style="color: #000000;">]
}
}
}
]
},resolve: { <span style="color: #008000;">//<span style="color: #008000;"> 代码模块路径解析的配置
extensions: ['.js','.jsx'] <span style="color: #008000;">//<span style="color: #008000;"> 进行模块路径解析时,webpack 会尝试补全后缀名来进行查找
<span style="color: #000000;"> },plugins: [
<span style="color: #0000ff;">new<span style="color: #000000;"> HtmlWebpackPlugin({
filename: 'index.html',<span style="color: #008000;">//<span style="color: #008000;"> 生成文件名
template: 'index.html' <span style="color: #008000;">//<span style="color: #008000;"> 模板
<span style="color: #000000;"> })
]
}

这次添加了字段 resolve.extensions 注意到 index.jsx 引用文件时没有添加文件后缀,因为通过 resolve.extensions 的配置 Webpack 会尝试补全指定后缀来查找。尝试补全的顺序是数组中元素的顺序。

打包后打开 dist/index.html 文件,可以看到一个虽然很丑但是能正常运行的页面。

打开 dist/bundle.js 可以发现文件的长度达到了 2w+ 行。那是因为我们把 react 也打包进来了。

react 是我们直接引入的代码,里面的内容很少会更改,而我们自己写页面会经常变化,所以为了充分利用页面缓存,希望把 node_modules 中的代码单独打包成一个 js 文件。

修改 webpack.config.js

path = require('path' HtmlWebpackPlugin = require('html-webpack-plugin' webpack = require('webpack'module.exports =<span style="color: #000000;"> {
...

plugins: [
    </span><span style="color: #0000ff;"&gt;new</span><span style="color: #000000;"&gt; HtmlWebpackPlugin({
        filename: </span>'index.html',<span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 生成文件名</span>
        template: 'index.html'  <span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 模板</span>

<span style="color: #000000;"> }),<span style="color: #0000ff;">new<span style="color: #000000;"> webpack.optimize.CommonsChunkPlugin({
name: 'vendor',<span style="color: #008000;">//<span style="color: #008000;"> 使用 vendor 入口作为公共部分
filename: "vendor.js"<span style="color: #000000;">,minChunks: (module,count) =><span style="color: #000000;"> {
<span style="color: #0000ff;">return module.context && module.context.includes("node_modules"<span style="color: #000000;">);
}
})
]
}

现在再次打包会出现 dist 下面会出现三个文件 而 bundle.js 中只有几百行代码了。

我们也可以给文件名添加 hash 防止浏览器缓存。

path = require('path' HtmlWebpackPlugin = require('html-webpack-plugin' webpack = require('webpack'module.exports =<span style="color: #000000;"> {
...

output: { </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 出口</span>
    path: path.resolve(__dirname,filename: </span>'js/[name].[chunkhash].js'<span style="color: #000000;"&gt;,},...

plugins: [
    </span><span style="color: #0000ff;"&gt;new</span><span style="color: #000000;"&gt; HtmlWebpackPlugin({
        filename: </span>'index.html',<span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; 使用 vendor 入口作为公共部分</span>
        filename: "js/[name].[chunkhash].js"<span style="color: #000000;"&gt;,count) </span>=><span style="color: #000000;"&gt; {
            </span><span style="color: #0000ff;"&gt;return</span> module.context &amp;&amp; module.context.includes("node_modules"<span style="color: #000000;"&gt;);
        }
    })
]

}

完整代码见: https://github.com/G-lory/front-end-practice/tree/master/webpack/study-notes/step3

4. 使用 webpack-dev-server 搭建本地环境

因为打包会花费很长时间 尤其是文件多的时候。我们开发时需要获取及时反馈,而不能每次打包后观察错对。

使用 webpack-dev-server 可以很简单的启动一个本地静态服务。

安装

npm i webpack-dev-server@2 -D

为了配合 Webpack3 需要指定版本。

然后在 package.json 添加脚本命令 start 

"scripts""start": "webpack-dev-server""build": "webpack"

然后运行    会默认在 http://localhost:8080/ 启动一个服务器 打开之后和之前打包的页面是一样的 尝试修改文件 会发现页面会实时变化。

可以在配置文件添加 devServer 字段配置 webpack-dev-server 的选项,比如下面配置打开地址和端口号

'localhost'8888 }

完整代码见: https://github.com/G-lory/front-end-practice/tree/master/webpack/study-notes/step4

5. 使用 css 和 less

上面完成的页面很丑,因为还没有加入样式。没用过less,但是sass-node那个包实在是很麻烦,还是选择了less,毕竟只是个demo。

不管是less还是css,Webpack都不认识,需要加入loader来处理。

安装

npm i less less-loader css-loader@0 style-loader -D

然后按照官网的提示,在配置文件的 rules 添加代码

module: { /\.jsx?/, exclude: /node_modules/, 'babel-loader', 'env',plugins: ['transform-runtime'/\.less$/'src''style-loader' 'css-loader' 'less-loader'

然后添加样式文件

{:;:; }.todoList {<span style="color: #ff0000;">
padding
:<span style="color: #0000ff;"> 10px 50px
;
}

<span style="color: #008000;">/<span style="color: #008000;"> input.less <span style="color: #008000;">/<span style="color: #800000;">
.input {<span style="color: #ff0000;">
margin-bottom:<span style="color: #0000ff;"> 10px;<span style="color: #ff0000;">
textarea {
width:<span style="color: #0000ff;"> calc(100% - 10px);<span style="color: #ff0000;">
height:<span style="color: #0000ff;"> 50px;<span style="color: #ff0000;">
color:<span style="color: #0000ff;"> #9c9c9c;<span style="color: #ff0000;">
border-radius:<span style="color: #0000ff;"> 5px;<span style="color: #ff0000;">
resize:<span style="color: #0000ff;"> none;<span style="color: #ff0000;">
outline:<span style="color: #0000ff;"> none;<span style="color: #ff0000;">
padding:<span style="color: #0000ff;"> 5px;<span style="color: #ff0000;">
margin-bottom:<span style="color: #0000ff;"> 5px;
}<span style="color: #800000;">
.btn {<span style="color: #ff0000;">
text-align:<span style="color: #0000ff;"> right;<span style="color: #ff0000;">
button {
border:<span style="color: #0000ff;"> none;<span style="color: #ff0000;">
outline:<span style="color: #0000ff;"> none;<span style="color: #ff0000;">
background-color:<span style="color: #0000ff;"> transparent;
}<span style="color: #800000;">
}
}

<span style="color: #008000;">/<span style="color: #008000;"> list.less <span style="color: #008000;">/<span style="color: #800000;">
.listItem {<span style="color: #ff0000;">
height:<span style="color: #0000ff;"> 40px;<span style="color: #ff0000;">
line-height:<span style="color: #0000ff;"> 40px;<span style="color: #ff0000;">
border:<span style="color: #0000ff;"> 1px solid #d6d6d6;<span style="color: #ff0000;">
display:<span style="color: #0000ff;"> flex;<span style="color: #ff0000;">
margin-bottom:<span style="color: #0000ff;"> 10px;<span style="color: #ff0000;">
padding:<span style="color: #0000ff;"> 10px;<span style="color: #ff0000;">

span {
flex-grow:<span style="color: #0000ff;"> 1;<span style="color: #ff0000;">
color:<span style="color: #0000ff;"> #9c9c9c;
}<span style="color: #800000;">

button {<span style="color: #ff0000;">
border:<span style="color: #0000ff;"> none;<span style="color: #ff0000;">
outline:<span style="color: #0000ff;"> none;<span style="color: #ff0000;">
background-color:<span style="color: #0000ff;"> transparent;
}<span style="color: #800000;">
}

然后再每个文件分别引用就可以。

查看页面,样式已经生效,但是这样的问题是,所有的样式都是全局样式,容易发生命名冲突的情况,css模块化可以解决这个问题。

css-loader 有一个 modules 可配置项,表示是否模块化,配置改为:

/\.less$/'src''style-loader' 'css-loader', '[name]__[local]___[hash:base64:5]' [文件名]__[类名]___[哈希] 'less-loader'

现在可以使用模块化样式了。

现在引用类是需要酱紫

import styles from './index.less'
.addItem.bind()} /> .state.list} handleRemove={.removeItem.bind()} />

而全局样式需要酱紫:

:global(*00

之前处于缓存的考虑,把 node_modules 单独打包,现在出于同样的考虑,需要把 css 也单独打包。

之前的 loader 是把 css 转成了 js 代码,而把 css 单独打包成一个文件,需要使用 ExtractTextPlugin。

安装:

npm install extract-text-webpack-plugin -D

修改配置文件

path = require('path' HtmlWebpackPlugin = require('html-webpack-plugin' webpack = require('webpack' ExtractTextPlugin = require("extract-text-webpack-plugin"module.exports =<span style="color: #000000;"> {
<span style="color: #008000;">//
<span style="color: #008000;"> ...

module: { <span style="color: #008000;">//
<span style="color: #008000;"> 配置loader

<span style="color: #000000;"> rules: [
<span style="color: #008000;">//
<span style="color: #008000;"> ...
<span style="color: #000000;"> {
test: /.less$/<span style="color: #000000;">,include: [
path.resolve(dirname,'src'<span style="color: #000000;">)
],use: ExtractTextPlugin.extract({
fallback: 'style-loader'<span style="color: #000000;">,use: [{
loader: 'css-loader',<span style="color: #008000;">//<span style="color: #008000;"> translates CSS into CommonJS
<span style="color: #000000;"> options: {
modules: <span style="color: #0000ff;">true<span style="color: #000000;">,localIdentName: '[name]
[local]_[hash:base64:5]' <span style="color: #008000;">//<span style="color: #008000;"> 生成的css类名 -> [文件名]_[类名][哈希]
<span style="color: #000000;"> }
},{
loader: 'less-loader' <span style="color: #008000;">//<span style="color: #008000;"> compiles Less to CSS
<span style="color: #000000;"> }]
})
},]
},<span style="color: #008000;">//<span style="color: #008000;"> ...
<span style="color: #000000;">
plugins: [
<span style="color: #0000ff;">new<span style="color: #000000;"> HtmlWebpackPlugin({
filename: 'index.html',count) =><span style="color: #000000;"> {
<span style="color: #0000ff;">return module.context && module.context.includes("node_modules"<span style="color: #000000;">);
}
}),<span style="color: #0000ff;">new ExtractTextPlugin('css/[name].[contenthash].css'<span style="color: #000000;">)
]
}

再次打包,现在CSS文件也单独分离出来了。

完整代码见: https://github.com/G-lory/front-end-practice/tree/master/webpack/study-notes/step5

6. 图片和雪碧图

每个正经的前端应该都知道雪碧图是什么吧,反正我不知道……我还以为是瀑布流什么的神奇效果……

通过 Webpack 的插件,可以自动把引入的图片生成雪碧图。也可以用 url-loader 来处理图片,这里没有选择使用。

首先 Webpack 不识别图片类型的文件 要引入 file-loader ,同时引入 webpack-spritesmith 用来生成雪碧图。

安装

npm install file-loader webpack-spritesmith -D

我找了两个图片

处理图片要添加 loader

/\.(png|jpg|gif)$/'file-loader'

生成雪碧图添加 plugins

SpritesmithPlugin = require('webpack-spritesmith'<span style="color: #0000ff;">new<span style="color: #000000;"> SpritesmithPlugin({
src: {
cwd: path.resolve(dirname,'images'),<span style="color: #008000;">//<span style="color: #008000;"> 多个图片所在的目录
glob: '*.png' <span style="color: #008000;">//<span style="color: #008000;"> 匹配图片的路径
<span style="color: #000000;"> },target: {
<span style="color: #008000;">//<span style="color: #008000;"> 生成最终图片的路径
image: path.resolve(
dirname,'src/spritesmith-generated/sprite.png'<span style="color: #000000;">),<span style="color: #008000;">//<span style="color: #008000;"> 生成所需 less 代码
css: path.resolve(__dirname,'src/spritesmith-generated/sprite.less'<span style="color: #000000;">),apiOptions: {
cssImageRef: "~sprite.png"<span style="color: #000000;">
}
})

现在打包的时候会在 /src/spritesmith-generated 生成雪碧图和所需的 less 代码

Webpack学习笔记

尝试使用,修改 input.less 和 list.less

input.less

'./spritesmith-generated/sprite.less'.input {
<span style="color: #008000;">/
<span style="color: #008000;"> ignore..
<span style="color: #008000;">/
<span style="color: #000000;">
.btn {
text
-<span style="color: #000000;">align: right;
button {
.sprite(@submit);
border: none;
outline: none;
background-<span style="color: #000000;">color: transparent;
}
}
}

list.less

@import './spritesmith-generated/sprite.less'.listItem {
<span style="color: #008000;">/<span style="color: #008000;"> ignore.. <span style="color: #008000;">/<span style="color: #000000;">

button {
.sprite(@<span style="color: #0000ff;">delete<span style="color: #000000;">);
border: none;
outline: none;
background-<span style="color: #000000;">color: transparent;
}
}

然后启动项目会发现报错了……

Webpack学习笔记

虽然也没看明白什么意思吧……反正就是在 less-loader 添加配置项   

然后打包发现路径不对查了下发现需要给 ExtractTextPlugin 配置 publicPath

最后该规则改为

/\.less$/'src''style-loader''css-loader', '[name]__[local]___[hash:base64:5]' [文件名]__[类名]___[哈希] 'less-loader', "../"

但是还是有报错

Webpack学习笔记

这个我是真的不知道怎么解决,只是发现去掉 css module 就没有这个问题了,于是我删掉了 css module 部分……(配合标题 我TM是真的菜

然后就可以正常打包了。一个 To Do List 就勉强做好了……

完整代码见: https://github.com/G-lory/front-end-practice/tree/master/webpack/study-notes/step6

Webpack学习笔记

7. 总结

我还是老老实实的用  create-react-app 和 vue-cli 吧……

8. 参考资料

每一个用到的 loader 和 plugin 的 GitHub 都会参考到 就不写了。

大佬总结

以上是大佬教程为你收集整理的Webpack学习笔记全部内容,希望文章能够帮你解决Webpack学习笔记所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ群:277859234,请注明来意。