详解webpack入门总结和实践(按需异步加载,css单独打包,生成多个入口文件) - 行业资讯

& # 65279;最近在项目中使用了一下webpack,所以这里打算对目前了解的使用方法做一个小小的总结

1. webpack一下自己就& # 128293;了,这绝对是一个重要的原因。
　　

2。然后我之前项目中都是通过requireJS,通过AMD来做到模块化开发.webpak不仅支持打包,而且支持AMD和CommonJS方式来做模块化开发,所以打算尝试一下webpack来实现模块化。

3。我的需求简单,适合新上手webpack,只需要生成上线目录,实现模块化,压缩代码等等

<强> webpack.config。js一般写法

开头声明对路径相关的变量,以及引入依赖,包括webpack(非必须),以及需要的插件
　　,然后,入口声明入口相关的如文件名,路径等,输出声明生成文件相关的路径和文件名,模块中是针对不同文件进行处理的装载机声明,插件声明了插件的具体使用。

<强>压缩代码

这里使用webpack的内置的插件,我们写在webpack.config。js中的插件部分
　　

　　　　　　新webpack.optimize.UglifyJsPlugin ({ 　　压缩:{ 　　警告:假　　} 　　}) 　　　　

<>强提取公共类库

这部分我没有用的到,但也是基于webpack内置的插件,目的是将用到的jquery等第三方库整合到一个文件,否则都合并到一个文件,会造成这个文件特别大
　　

首先在入口声明第三方库
　　

　　　　　　条目:{ 　　应用:路径。解决(APP_PATH index.js),//添加要打包在vendeors里面的库　　供应商:[“jquery”,“时刻”) 　　}，　　插件:{//把入口文件里面的数组打包成vendors.js 　　新的webpack.optimize。CommonsChunkPlugin(“供应商”、“vendors.js”), 　　} 　　　　

<强> css单独打包

有的时候需要将css单独打包,作为CDN,或者我这里的情况是是,页面引入了很多的css js文件,而我的js在最后加载!所以如果是js中引入的css,那么会导致页面在开始的时候没有样式,知道解析到我的js !所以这里将css单独打包,单独在页面引入!

首先需要安装插件
　　

　　　　　　npm安装extract-text-webpack-plugin -save-dev 　　　　

然后在webpack.config。js中声明插件
　　

　　　　//引入css单独打包插件　　var ExtractTextPlugin=要求(“extract-text-webpack-plugin”);//设置生成css的路径和文件名,会自动将对应进入入口js文件中引入的css抽出成单独的文件　　var packCSS=new ExtractTextPlugin (’。/css/[名字].min.css ');之前　　　　

在插件中引入并使用
　　

　　　　　　插件:[ 　　packCSS 　　) 　　　　

我们需要首先在js中引用相应的css文件

　　　　　　要求(“。/css/plan.css”); 之前　　　　

然后这个插件会自动将js中的css文件提取出来,生成单独的文件

<强>样式的处理

安装css-loader style-loader
　　

　　　　　　npm安装css-loader style-loader——save-dev 　　　　

css-loader会遍历css文件,找到所有的url(…)并且处理.style-loader会把所有的样式插入到你页面的一个风格
　　

　　　　　　模块:{ 　　加载器:( 　　{ 　　测试:/\ . css/美元, 　　加载器:“风格”,“css”, 　　包括:APP_PATH 　　} 　　] 　　} 　　　　

<强>图片的处理

安装url-loader
　　

　　　　　　npm安装url-loader——save-dev 　　　　

webpack.config。js
　　

　　　　　　{ 　　测试:/\。(png | jpg)/美元, 　　装载机:url # 63;限制=8192,名字=图像/(散列:8)。[名字]。[ext]” 　　　　} 　　之前　　　　

限制设置一个阈值,小于这个值得图片就会自动启用base64编码的图片,大于这个值的图片会打包到名字这参数对应的路径,图片名称就会包括8位md5编码名称对应文件本来名称,ext对应扩展名

我在图片这里遇到的问题和css类似,都是原本我是在js中引入css img等静态资源。但是
　　,因为我的页面引入了很多的css, js文件,而我的js文件放到最后加载,所以会导致我的js引用的css img在最后才加载。这会导致页面开始的时候会出现没有样式,而图片刚开始会显示失败的问题。