大佬教程收集整理的这篇文章主要介绍了Webpack学习笔记,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
the ${idx + 1<span style="color: #000000;">}th row
;title="Webpack学习笔记" alt="Webpack学习笔记" src="https://cn.js-code.com/res/2019/02-05/22/1409075f756aea0ecbde9d98c5dbcfe1.png" >
@H_618_0@打开文件可以看到,前面是 webpack 生成的一些代码,后面就是 index.js 和 others.js 中的代码。 @H_618_0@然后在 index.html 中引用文件the ${idx </span>+ 1<span style="color: #000000;">}th row
);constructor(props) {
super(props);
</span><span style="color: #0000ff;">this</span>.state =<span style="color: #000000;"> {
list: []
};
}
addItem(item) {
</span><span style="color: #0000ff;">this</span><span style="color: #000000;">.setState({
list: </span><span style="color: #0000ff;">this</span><span style="color: #000000;">.state.list.concat(item)
})
}
removeItem(idX) {
</span><span style="color: #0000ff;">this</span><span style="color: #000000;">.setState({
list: </span><span style="color: #0000ff;">this</span>.state.list.filter((it,id) => id !==<span style="color: #000000;"> idX)
})
}
render() {
</span><span style="color: #0000ff;">return</span><span style="color: #000000;">(
</span><div className='todoList'>
<Input handleSubmit={<span style="color: #0000ff;">this</span>.addItem.bind(<span style="color: #0000ff;">this</span>)} />
<List list={<span style="color: #0000ff;">this</span>.state.list} handleRemove={<span style="color: #0000ff;">this</span>.removeItem.bind(<span style="color: #0000ff;">this</span>)} />
</div>
@H_618_0@<span style="color: #000000;"> )input.jsx
<={={.handleChange.bind( <span style="color: #000000;"> ) export </span>>
</textarea>
</p>
<p className='btn'>
<button onClick={<span style="color: #0000ff;">this</span>.submit.bind(<span style="color: #0000ff;">this</span>)}>提交</button>
</p>
</div>
}
}
list.jsx
然后修改 webpack.config.js
这次添加了字段 resolve.extensions 注意到 index.jsx 引用文件时没有添加文件后缀,因为通过 resolve.extensions 的配置 Webpack 会尝试补全指定后缀来查找。尝试补全的顺序是数组中元素的顺序。
打包后打开 dist/index.html 文件,可以看到一个虽然很丑但是能正常运行的页面。
打开 dist/bundle.js 可以发现文件的长度达到了 2w+ 行。那是因为我们把 react 也打包进来了。
react 是我们直接引入的代码,里面的内容很少会更改,而我们自己写页面会经常变化,所以为了充分利用页面缓存,希望把 node_modules 中的代码单独打包成一个 js 文件。
修改 webpack.config.js
plugins: [
</span><span style="color: #0000ff;">new</span><span style="color: #000000;"> HtmlWebpackPlugin({
filename: </span>'index.html',<span style="color: #008000;">//</span><span style="color: #008000;"> 生成文件名</span>
template: 'index.html' <span style="color: #008000;">//</span><span style="color: #008000;"> 模板</span>
<span style="color: #000000;"> }),
<span style="color: #0000ff;">new<span style="color: #000000;"> webpack.optimize.CommonsChunkPlugin({现在再次打包会出现 dist 下面会出现三个文件 而 bundle.js 中只有几百行代码了。
我们也可以给文件名添加 hash 防止浏览器缓存。
output: { </span><span style="color: #008000;">//</span><span style="color: #008000;"> 出口</span>
path: path.resolve(__dirname,filename: </span>'js/[name].[chunkhash].js'<span style="color: #000000;">,},...
plugins: [
</span><span style="color: #0000ff;">new</span><span style="color: #000000;"> HtmlWebpackPlugin({
filename: </span>'index.html',<span style="color: #008000;">//</span><span style="color: #008000;"> 使用 vendor 入口作为公共部分</span>
filename: "js/[name].[chunkhash].js"<span style="color: #000000;">,count) </span>=><span style="color: #000000;"> {
</span><span style="color: #0000ff;">return</span> module.context && module.context.includes("node_modules"<span style="color: #000000;">);
}
})
]
}
完整代码见: https://github.com/G-lory/front-end-practice/tree/master/webpack/study-notes/step3
因为打包会花费很长时间 尤其是文件多的时候。我们开发时需要获取及时反馈,而不能每次打包后观察错对。
使用 webpack-dev-server 可以很简单的启动一个本地静态服务。
安装
为了配合 Webpack3 需要指定版本。
然后在 package.json 添加脚本命令 start
然后运行 会默认在 http://localhost:8080/ 启动一个服务器 打开之后和之前打包的页面是一样的 尝试修改文件 会发现页面会实时变化。
可以在配置文件添加 devServer 字段配置 webpack-dev-server 的选项,比如下面配置打开地址和端口号
完整代码见: https://github.com/G-lory/front-end-practice/tree/master/webpack/study-notes/step4
上面完成的页面很丑,因为还没有加入样式。没用过less,但是sass-node那个包实在是很麻烦,还是选择了less,毕竟只是个demo。
不管是less还是css,Webpack都不认识,需要加入loader来处理。
安装
然后按照官网的提示,在配置文件的 rules 添加代码
然后添加样式文件
<span style="color: #008000;">/
<span style="color: #008000;"> input.less <span style="color: #008000;">/<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 可配置项,表示是否模块化,配置改为:
现在可以使用模块化样式了。
现在引用类是需要酱紫
而全局样式需要酱紫:
之前处于缓存的考虑,把 node_modules 单独打包,现在出于同样的考虑,需要把 css 也单独打包。
之前的 loader 是把 css 转成了 js 代码,而把 css 单独打包成一个文件,需要使用 ExtractTextPlugin。
安装:
修改配置文件
再次打包,现在CSS文件也单独分离出来了。
完整代码见: https://github.com/G-lory/front-end-practice/tree/master/webpack/study-notes/step5
每个正经的前端应该都知道雪碧图是什么吧,反正我不知道……我还以为是瀑布流什么的神奇效果……
通过 Webpack 的插件,可以自动把引入的图片生成雪碧图。也可以用 url-loader 来处理图片,这里没有选择使用。
首先 Webpack 不识别图片类型的文件 要引入 file-loader ,同时引入 webpack-spritesmith 用来生成雪碧图。
安装
我找了两个图片
处理图片要添加 loader
生成雪碧图添加 plugins
现在打包的时候会在 /src/spritesmith-generated 生成雪碧图和所需的 less 代码
尝试使用,修改 input.less 和 list.less
input.less
list.less
button {
.sprite(@<span style="color: #0000ff;">delete<span style="color: #000000;">);
border: none;
outline: none;
background-<span style="color: #000000;">color: transparent;
}
}
然后启动项目会发现报错了……
虽然也没看明白什么意思吧……反正就是在 less-loader 添加配置项
然后打包发现路径不对查了下发现需要给 ExtractTextPlugin 配置 publicPath
最后该规则改为
但是还是有报错
这个我是真的不知道怎么解决,只是发现去掉 css module 就没有这个问题了,于是我删掉了 css module 部分……(配合标题 我TM是真的菜
然后就可以正常打包了。一个 To Do List 就勉强做好了……
完整代码见: https://github.com/G-lory/front-end-practice/tree/master/webpack/study-notes/step6
我还是老老实实的用 create-react-app 和 vue-cli 吧……
每一个用到的 loader 和 plugin 的 GitHub 都会参考到 就不写了。
以上是大佬教程为你收集整理的Webpack学习笔记全部内容,希望文章能够帮你解决Webpack学习笔记所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。