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

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

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

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标签的 引入

}

]

[展开全文]

"extract-text-webpack-plugin": "^3.0.2",

 

//css分离

const extractTextPlugin = require("extract-text-webpack-plugin");

var website = {

publicPath: "http://192.168.1.177:1717/"

}

output: {

//输出的路径,用了Node语法

path: path.resolve(__dirname, 'dist'),

//输出的文件名称

filename: '[name].js',

publicPath: website.publicPath

},

//模块:例如解读CSS,图片如何转换,压缩

module: {

rules: [{

test: /\.css$/,

use: extractTextPlugin.extract({

fallback: "style-loader",

use: "css-loader"

})

}, {

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

use: [{

loader: 'url-loader',

options: {

limit: 5000

}

}]

}]

},

[展开全文]

webpack.config.js 

引入 路径

const path = require('path');

module.exports={

//入口文件的配置项

entry:{

entry:'./src/entry.js',

A:'./src/A.js'

},

//出口文件的配置项

output:{

path:path.resolve(__dirname,'dist'),

filename:'[name].js'

},

//模块:例如解读CSS,图片如何转换,压缩

module:{},

//插件,用于生产模版和各项功能

plugins:[],

//配置webpack开发服务功能

devServer:{}

}

[展开全文]

//引入html

const htmlPlugin = require('html-webpack-plugin')

npm install --save-dev html-webpack-plugin

 

//插件,用于生产模版和各项功能

plugins: [

//new uglifyPlugin()

new htmlPlugin({

minify: {

removeAttrbuteQuotes: true

},

hash: true,

template:'./src/index.html'

})

// new webpack.NamedModulesPlugin(),

//new webpack.HotModuleReplacementPlugin()

],

[展开全文]

//js 压缩  引入

const uglify = require('uglifyjs-webpack-plugin')

//插件,用于生产模版和各项功能

plugins: [

new uglify()

]

[展开全文]
  1. "css-loader": "^0.28.7",

    "style-loader": "^0.19.0",

module: {

rules:[

{

test:/\.css$/,

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

}

]

},

[展开全文]

webpack.config.js配置css打包的时候,test的正则表达式不能用字符串的形式,use数组里,style-loader必须要在css-loader前面

[展开全文]

webpack3.x版本中,webpack-cli与其本体在一个文件夹内,不需要独立安装,而在webpack4.x版本中,webpack本体与webpack-cli分离,需要独立安装webpack-cli之后才能进行打包,打包命令为:

webpack --mode [development,production,none] <entries> --output <output>

[展开全文]

--save-dev : 保存到开发环境中

--save  :保存到生产环境(输出的时候会有依赖)

[展开全文]

js压缩

uglifyjs-webpack-plugin  不需安装

 

html打包

html-webpack-plugin  需要安装

[展开全文]

wepack4.0插件extract-text-webpack-plugin最后运行的时候会报错,这时候插件升级为"extract-text-webpack-plugin": "^4.0.0-beta.0"就ok啦

[展开全文]

(1)npm run server 开启的后台服务和live-server开启的后台服务有什么区别??

(2)num run server 中的“server”指代的是在package.json  --> scripts 中设置的别名吗 ?

[展开全文]

授课教师

金牌讲师
专业打杂

课程特色

视频(26)