随笔- 596 文章- 2 评论- 8 阅读- 31万

webpack学习

学习webpack 4.0 https://webpack.docschina.org/concepts/

一个最简单的打包的代码。https://github.com/ronami/minipack

itstrive的代码 https://github.com/itstrive

#### npm start

1. -D 和-S的区别和联系。

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

492

493

494

495

496

497

498

499

500

501

502

503

504

505

506

507

508

509

510

511

512

513

514

515

516

517

518

519

520

521

522

523

524

525

526

527

528

529

530

531

532

533

534

535

536

537

538

539

540

541

542

543

544

545

546

547

548

549

550

551

552

553

554

555

556

557

558

559

560

561

562

563

564

565

566

567

568

569

570

571

572

573

574

575

576

577

578

579

580

581

582

583

584

585

586

587

588

589

590

591

592

593

594

webpack1.x
----------------------------------
webpack2.x
----------------------------------
webpack3.x
----------------------------------
webpack4.x
---------------------------------
 
官网: https://webpack.js.org/
 
---------------------------------
静态开发(H5+C3) gulp
vue\react  ->  webpack
DEMO  -> webpack 转
---------------------------------
webpack是什么?
    打包工具(模块打包器)
    前端工程师，必不可少工具
    webpack4.x
webpack作用:
1. 打包  (把多个文件打包成一个js文件， 较少服务器压力、带宽)
2. 转化  (比如less、sass、ts)   需要loader
3. 优化  (SPA越来越盛行，前端项目复杂度高， webpack可以对项目进行优化)
---------------------------------
webpack构成:
1. 入口   entry
2. 出口   output
3. loaders  转化器
4. plugins  插件
5. devServer 开发服务器
6. mode   
------------------------------------------------------------------
先必须确保node环境已经安装
    nodejs.org  -> download -> 下一步
------------------------------------------------------------------
安装webpack:
    npm install webpack-cli -g
 
    OR
 
    yarn add webpack-cli -g
 
    验证webpack环境已经ok?
        webpack -v
------------------------------------------------------------------
package.json  项目主要依赖配置文件
 
    npm init -y
 
------------------------------------------------------------------
开发环境: (develepment)
    就是你平时编写代码的环境
 
    npm i jquery --save-dev
    npm i jquery -D
生产环境: (production)
    项目开发完毕，部署上线
     
    npm i jquery --save
    npm i jquery -S
--------------------------------------------------------------------
 
npm i jquery
npm un jquery
 
 
npm i jquery --save-dev
npm i jquery --save
 
npm i jquery --save-dev jquery
--------------------------------------------------------------------
 
npm i jquery loadsh aaa bbb ccc -D
 
--------------------------------------------------------------------
cnpm如何配置:
    npm install -g cnpm --registry=https://registry.npm.taobao.org
 
--------------------------------------------------------------------
跑一跑webpack:
    终端里运行:
        webpack src\index.js --output dist/bundle.js
--------------------------------------------------------------------
webpack.config.js    webpack配置文件
 
    预览:
 
        module.exports={
            //入口配置
            entry:{},
            //出口配置
            output:{},
            //module.rules
            //loaders
            module:{},
            //插件
            plugins:[],
            //开发服务器
            devServer:{}
        };
--------------------------------------------------------------------
module.exports={
    //入口配置
    entry:{
        a:'./src/index.js'
    },
    //出口配置
    output:{
        path:__dirname+'/dist', //path必须是绝对路径
        filename:'bundle.js'
    }
};
--------------------------------------------------------------------
const path = require('path'); //node系统模块
module.exports={
    //入口配置
    entry:{
        a:'./src/index.js'
    },
    //出口配置
    output:{
        path:path.resolve(__dirname,'dist'), //path必须是绝对路径
        filename:'bundle.js'
    }
};
--------------------------------------------------------------------
配置文件名字一定得叫 webpack.config.js  答: 不是
 
如果改名叫:  mmr.config.js
 
    运行时候:
 
    webpack --config mmr.config.js
--------------------------------------------------------------------
npm run dev
npm run build
 
npm scripts:
 
    package.json:
 
        "scripts": {
                "build": "webpack --config mmr.config.js",
            "dev":"xxx",
            "aaa":"xxx"
          }
--------------------------------------------------------------------
parcel   零配置
--------------------------------------------------------------------
webpack4.x 实现所谓的0配置:
     
--------------------------------------------------------------------
mode:
 
    webpack --mode development
         
    webpack --mode production 
        明显文件被压缩
 
--------------------------------------------------------------------
 
多入口(多文件)打包一起:
    const path = require('path');
    module.exports = {
        entry:['./src/index.js','./src/index2.js'],  //按照顺一起打包 bundle.js
        output:{
            path:path.resolve(__dirname, 'dist'),
            filename:'bundle.js'
        }
    };
--------------------------------------------------------------------
多入口多出口配置:
    const path = require('path');
    module.exports = {
        entry:{
            index:'./src/index.js',
            index2:'./src/index2.js'
        },
        output:{
            path:path.resolve(__dirname, 'dist'),
            filename:'[name].bundle.js'
        }
    };
--------------------------------------------------------------------
npm i webpack-cli -g
--------------------------------------------------------------------
 
html-webpack-plugin:
    * 注意: 依赖webpack、webpack-cli
    生成页面
 
    1. 安装
        npm i html-webpack-plugin -D
    2. 引入
        const HtmlWebpackPlugin = require('html-webpack-plugin');
    3. 使用
        plugins:[
            new HtmlWebpackPlugin()
        ]
    ----------------------------------------------------
    html-webpack-plugin:
        模板:
            new HtmlWebpackPlugin({
                template:'模板地址'
            })
        页面标题:
            new HtmlWebpackPlugin({
                title:'xxxxx',
                template:'模板地址'
            })
 
            一定记得在模板中使用:
        生成连接消除缓存:
            new HtmlWebpackPlugin({
                hash:true,
                title:'xxxxx',
                template:'模板地址'
            })
        压缩输出:
            new HtmlWebpackPlugin({
                minify:{
                    collapseWhitespace:true,  //压缩空白
                    removeAttributeQuotes:true //删除属性双引号
                },
                hash:true,
                title:'I Love China',
                template:'./src/index.html'
            })
        生成多个页面:
            filename:'xxx'
        多页面分别引入自己的js:
            chunks:['index']
 
    https://www.npmjs.com/package/html-webpack-plugin#
--------------------------------------------------------------------
clean-webpack-plugin:   删除某些东西(清除)
    1. 下载
        cnpm i clean-webpack-plugin -D
    2. 引入
        const CleanWebpackPlugin = require('clean-webpack-plugin');
    3. 使用:
        new CleanWebpackPlugin(['dist'])
--------------------------------------------------------------------
devServer:
    1. 下载
        cnpm i webpack-dev-server -D
    2. 使用
        devServer:{
                //设置服务器访问的基本目录
                contentBase:path.resolve(__dirname, 'dist'),
                //服务器ip地址， localhost
                host:'localhost',
                //设置端口
                port:8090
            }
 
    此时  pakcage.json:
        "scripts": {
            "build": "webpack --mode development",
            "dev":"webpack-dev-server --mode development"
        }
 
    想自动打开浏览器:
        open:true
 
    热更新:
        hot:true
 
        开启:
            new webpack.HotModuleReplacementPlugin()
 
    https://webpack.js.org/configuration/dev-server/
 
--------------------------------------------------------------------
loaders:  在webpack里面是一个很重要功能
    加载器、转化器
    比如: less/scss 转成css
            ES7 8
            jsx
--------------------------------------------------------------------
处理css文件:
    style-loader
    css-loader
 
        cnpm i style-loader css-loader -D
 
    配置:
        module:{
            rules:[
                {
                    test:/\.css$/,
                    use:['style-loader','css-loader']
                }
            ]
        }
 
    关于loader写法:
        1. use:['xxx-loader','xxx-loader']
        2. loader:['xxx-loader','xxx-loader']
        3. use:[
                        {loader:'style-loader'},
                        {loader:'css-loader'}
                    ]
--------------------------------------------------------------------
打包完以后肯定需要压缩上线:
    如何压缩:
    1. webpack4.x
        --mode production
    2. 之前版本
        uglifyjs-webpack-plugin
 
        a). cnpm i uglifyjs-webpack-plugin -D
        b). const uglify = require('xxx);
        c). new ugliufy()
--------------------------------------------------------------------        
图片: (png,jpg,gif)
    url-loader
    file-loader
 
    1. cnpm i file-loader url-loader -D
    2. 配置
        {
                    test:/\.(png|jpg|gif)$/,
                    use:[{
                        loader:'url-loader',
                        options:{
                              limit:50，
             outputPath:'images'
                        }
                    }]
                }
--------------------------------------------------------------------
分离:  css
    extract-text-webpack-plugin
 
    1. cnpm i extract-text-webpack-plugin -D        webpack3.x
     
        cnpm i extract-text-webpack-plugin@next -D  webpack4.x
    2. 在plugins里面应用
        new ExtractTextPlugin(提取出去的路径)
 
        use:ExtractTextPlugin.extract({
            fallback:'style-loader',
            use:'css-loader',
            publicPath:'../' //解决css背景图，路径问题
        })
    3. 遇见一些小事
--------------------------------------------------------------------        
mini-css-extract-plugin:   截止到目前为止(2018-3-23)，对背景图路径配置
    API文档
 
    new MiniCssExtractPlugin({
        filename:'css/index.css'
    })
--------------------------------------------------------------------
less:
    1. cnpm i less less-loader -D
    2. {
        test:/\.less$/,
        use:['style-loader','css-loader','less-loader']
    }
 
 
分离less:
    {
                test:/\.less$/,
                //use:['style-loader','css-loader','less-loader']
                use:ExtractTextPlugin.extract({
                    fallback:'style-loader',
                    use:['css-loader','less-loader']
                })
            }
--------------------------------------------------------------------
sass:
    cnpm i node-sass sass-loader -D
 
    配置:
    {
                test:/\.(sass|scss)$/,
                use:['style-loader','css-loader','sass-loader']
            }
 
提取sass:
    {
                test:/\.(sass|scss)$/,
                use:ExtractTextPlugin.extract({
                    fallback:'style-loader',
                    use:['css-loader','sass-loader']
                })
            }
--------------------------------------------------------------------        
transform:
 
-webkit-transform:
 
自动处理前缀:
 
    postCss 预处理器
 
    专门处理css平台
 
1. cnpm i postcss-loader
    autoprefixer -D
 
2. 准备 postcss.config.js   配置postCss
    module.exports ={
        plugins:[
            require('autoprefixer')
        ]
    };
3. 配置loader
    use:[
                    {loader:'style-loader'},
                    {loader:'css-loader'},
                    {loader:'postcss-loader'}
                ]
4. 提取出来
    use:ExtractTextPlugin.extract({
                    fallback:'style-loader',
                    use:['css-loader','postcss-loader'],
                    publicPath:'../' //解决css背景图，路径问题
                })
--------------------------------------------------------------------
消除冗余css代码:
    Purifycss
 
    1. 下载
 
        cnpm i purifycss-webpack purify-css -D
    2. 引入插件
        const PurifyCssWebpack = rewquire('purifycss-webpack');
    3. 需要引入一个额外包
        glob
        cnpm i glob -D
    4. 在plugins里面配置
        new PurifyCssWebpack({
                    paths:glob.sync(path.join(__dirname, 'src/*.html'))
                })
---------------------------------------------
调试:
    webpack4.x 开启调试:
        --mode development
 
    webpack3.x之前:
        sourceMap
 
        devtool:'source-map',
 
---------------------------------------------
babel:
    - babel用来编译js
    - 让你很轻松的使用 ESnext,转化
    - jsx
 
babel-core  bable-loader    babel-preset-env
 
    1. 下载
        cnpm i babel-loader babel-core babel-preset-env -D
    2. 配置
        {
                    test:/\.(js|jsx)$/,
                    use:['babel-loader'],
                    exclude:/node_modules/
                }
 
    ESnext所有语法
---------------------------------------------
jsx:
    cnpm i babel-preset-react -D
    cnpm i react react-dom -D
---------------------------------------------
在webpack中用模块化:
    和node一模一样
 
    导出:
        module.exports = xxx
    引入:
        require('./xxxxx');
---------------------------------------------
在webpack中使用json:
    json-loader
 
    到webpack.3x版本之后不用，json可以默认就识别
 
    const json = require('./xxx.json')
---------------------------------------------
静态资源输出:
    copy-webpack-plugin
 
    1. 下载
        cnpm i copy-webpack-plugin -D
    2. 引入
        const CopyWebpackPlugin = require('copy-webpack-plugin');
    3. 使用
        plugins:[
            new CopyWebpackPlugin([{
                from:path.resolve(__dirname, 'src/assets'),
                to:'./public'
            }])
        ]
---------------------------------------------   
https://webpack.js.org/plugins/copy-webpack-plugin/
 
都在npm上:
     
 
    github  issues
---------------------------------------------
使用第三库:
    1. 直接npm下载，然后引入（完全可以使用，但是我个人不是很推荐）
        cnpm i jquery -S
         
        import $ from 'jquery'
 
        $(xxxx).on()
        $(xxx).css()
    2. ProvidePlugin    (个人推荐此方式)
        const webpack = require('webpack');
 
        在plugins里面使用:
         
            new webpack.ProvidePlugin({
                $:'jquery',
                lodash:'lodash'
                ....
            })
 
    通过ProvidePlugin和 import直接引入区别:
        1. import $...，引入之后，无论你在代码中是否使用jquery，打包后，都会打进去，这样其实产生大量的冗余js
        2. Provideplugin, 只有你在使用到此库，才会打包
--------------------------------------------------------
提取第三方(自己感觉想提取)js库:
    之前webpack3.x版本之前:
         
        new webpack.optimize.CommonsChunkPlugin({
            name:'jquery'
        })
 
    到了webpack4.x版本:
        optimization.splitChunks
 
        optimization:{
            splitChunks:{
                cacheGroups:{
                    vendor:{
                        chunks:'initial',
                        name:'jquery',
                        enforce:true
                    }
                }
            }
        }
        ----------------------------------------------
        optimization:{
            splitChunks:{
                cacheGroups:{
                    aaa:{
                        chunks:'initial',
                        name:'jquery',
                        enforce:true
                    },
                    bbb:{
                        chunks:'initial',
                        name:'入口名称',
                        enforce:true
                    }
                }
            }
        }
--------------------------------------------------------
http://mmr.ke.qq.com
 
官方QQ群: 651661013
 
 
 
 
 
     
 
 
 
 
     
 
     
 
     
 
     
 
             
        

===米斯特吴的教学视频。

#### Webpack 中 file-loader 和 url-loader 的区别

url-loader和file-loader是什么关系呢？<br>简答地说，url-loader封装了file-loader。url-loader不依赖于file-loader，即使用url-loader时，只需要安装url-loader即可，不需要安装file-loader，因为url-loader内置了file-loader。<br>通过上面的介绍，我们可以看到，url-loader工作分两种情况：<br>1.文件大小小于limit参数，url-loader将会把文件转为DataURL；<br>2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。因此我们只需要安装url-loader即可。

#### babel注入的三种方式。

（1）命令行直接使用babel aa.js(前提是你的.babelrx记性了配置)

(2) 在webpack main.js中 entry中率先注入。

（3）在main.js中引用。

https://www.cnblogs.com/zhansu/p/8305081.html

https://www.jianshu.com/p/0dc3bddb6da8

##### webpack寻找配置文件。

webpack --config=config/webpack.dev.js

#### overlay:true

命令行和html页面的console一起报错。

#### transform-runtime

这个可以避免promise编译的时候的污染。