1419人加入学习
(30人评价)
Webpack 3.X版本 成神之路

如果您已经在前端行业中,webpack在业界的流行程度自然必备多说,成为了前端小白升级为前端工程师的必备技能。如果你对webpack还不够熟悉,那你在前端前进的脚步会受到阻碍,但是你幸运的看到了这门课程。

价格 ¥ 48.00
承诺服务
会员免费学 购买课程

遇到了两个问题:

1.因为是4点几的版本,所以执行命令不成功。所以我把本地回退到3.点几就可以了。4.几的试了下网上的没成功,有人知道怎么改吗?

npm i -d webpack@3

 

2.不知为何照着视频,在我本地说找不到bundle.js

把引用改为<script src="./dist/bundle.js"></script>就可以了

[展开全文]

暂时未发现无法打包JSON文件的问题,有可能是babel-loader引起的问题。

[展开全文]

webpack4.x分离参考:

https://blog.csdn.net/qq_26733915/article/details/79458533

[展开全文]

简单使用watch:webpack --watch,会自动监听文件的修改并打包。 

在webpack.con fig.js中配置watch的选项:

plugins: [

  watchOptions: {

    poll: 1000, // 监测修改的事件,单位是毫秒

    aggregateTimeout: 500, // 保存间隔保护事件,500毫秒内多次保存打包,只算一次打包。

    ignored: /node_modules/ // 监测白名单,不监测里面文件的变动。

  }

]

补充内容:

webpack.BannerPlugin 插件,在打包的入口文件中的最上方写入我们想要显示的注释。

[展开全文]

需要注意的是,像出口设置模块化的话,在webpack_config文件夹中设置了 output_webpack.js,那么里面输出的地址一定需要注意,不能按照以前 path.resolve(__dirname , 'dist')这样写了,因为现在 __dirname的路径是 webpack_config文件夹下了。所以需要将后面的路径修改到根目录下,path.resolve(__dirname,'../dist'); ouput.path必须是一个绝对路径。

所以,如果是模块化配置的话,需要注意到路径地址。模块化devServer同样也需要注意它的路径。

[展开全文]

开发环境安装组件:

npm install --save-dev 

npm install

生产环境安装组件:

npm install --save 

npm install --production

 

设置开发环境和生产环境打包:

首先在package.json中设置打包命令,传递一个参数,然后在webpack.config.js中获取这个参数,根据参数的值来设置不同的打包路径。

// package.json

"script": {"dev": "set type=dev&webpack --mode development",

"build": "set type=build&webpack --mode production"

}

注意:在MAC或linux中,不能使用"set",只能使用"export",而且要写两个"&"符号,即

"export type=dev&&webpack -mode development"

 

// webpack.config.js

console.log(encodeURIComponent(process.env.type));

if(process.env.type =="build"){

  var website = {publicPath:"http://ylet.com:8080/"}

} else {

  var website = {publicPath: "http://localhost:8080/"}

}

 

[展开全文]

source-map 种类:

source-map:生成独立的sourcemap文件,带有行和列映射(错误提醒)。打包速度最慢,最安全。

cheap-module-source-map:生成独立的sourcemap文件,但是只带有行错误提示,没有列映射。打包速度第二慢

eval-source-map:打包速度很快,功能和souce-map一样,打包速度第三慢,打包后会和javascript文件同行。但是有安全隐患,推荐在开发环境调试用,生产环境不要使用!

cheap-module-eval-source-map:打包速度最快,打包后的soucemap会和javascript文件同行显示,只有行错误提示,没有列映射。它和eval-source-map有相同的缺点。

[展开全文]

babel-core默认安装的版本是6.x,而babel-loader默认安装的版本是8.x,会出现错误提示。随意对其中一个升级或降级都可以。

注意:

babel-core 的7.x版本匹配babel-loader的8.x版本。

babel-core的6.x版本匹配babel-loader的7.x版本。

 

渲染器的安装:

选用babel-preset-env 渲染器即可。能转换ES6、ES7。

将babel配置放到babel的配置文件 ".babelrc"中:

{

    "presets":  ["env", "react"]

}

[展开全文]

使用purifycss-webpack插件和purify-css插件,配合node.js的glob插件使用

[展开全文]

安装node-sass最好使用cnpm来安装。因为npm安装会要从github上下载数据,如果网络被限制就无法下载,会安装失败。需要npm uninstall卸载之后再用cnpm安装。

[展开全文]

如果使用的是webpack4.x版本,安装extract-text-webpack-plugin插件,需要安装beta版本。

npm install --save-dev extract-text-webpack-plugin@next

[展开全文]

webpack作用:

1、打包

2、加载资源 eg: sasss/less

3、优化。加载很多模块,第一次加载性能上可能会出现问题,优化进而提高性能

[展开全文]
<div>aaaa</div>

=^\sim \sqrt[{2}] {5}​​​​​​​​​​​​​​

[展开全文]

另外两种写法:

1:loader:['style-loader','css-loader']

常用2:use:[{

loader:'style-loader'

},{

loader:'css-loader'

}]

3.use('style-loader','css-loader')

[展开全文]

node-sass 

sass-loader 

index.scss

更改webpack.config.js 配置项

[展开全文]

npm install less

npn install less-loader

config 配置正则

[展开全文]

rules: [

//CSS打包到文件下

{

test: /\.css$/,

use: extractTextPlugin.extract({

fallback: "style-loader",

use: "css-loader"

})

},{

test:/\.(png|jpg|gif)/ ,

 loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]' //图片打包到文件夹下

},{

test: /\.(htm|html)$/i,

use:[ 'html-withimg-loader'] //html中有img标签的 引入

}

]

[展开全文]