各位看官git上求个星星！ 我有趣的前端笔记！！(webpack，babel，typescript，手撕排序算法等持续更新中！！)

一、初步搭建

1、初始化package.json

yarn init -y

npm init -y

npm会比yarn多scripts 对象

作用：便捷指令

//package.json

{

"name": "demo1",

"version": "1.0.0",

"main": "index.js",

"license": "MIT",

"scripts": {

//"test": "echo \"Error: no test specified\" && exit 1"//初始化生成

"build": "webpack"//webpack命令

},

"keywords": [],

"author": "",

"description": ""

}

2、安装webpack

使用开发者依赖即可

yarn add -D webpack webpack-cli

3、初步实现配置

0、根目录下 创建webpack.config.js

1、实现打包文件 自动生成html 并会在html中导入

安装 html-webpack-plugin 包

webpack.config.js 导入包+plugins新建实例

2、入口文件设置输出

利用entry设置文件对应打包后的文件名

entry:{

index:'./src/index.js',

home:'./src/home.js',

page:'./src/page.js'

}

利用output重构打包后的文件名

//会重新构成打包后的文件名

//[name] 对应上面entry的key值

//[hash] 随机生成的hash值 :8 是剪切前6位

output:{

filename:'[name].[hash:8].js',

//path控制输出文件夹的名字 [默认dist]

path:path.join(__dirname,'release')//前提导入path模块 需要用绝对路径!!

},

const path = require('path')

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

module.exports = {

//1.编译打包模式[production/development]

mode: 'development',

//2.入口文件设置{换而言之=>要打包的文件} //多入口写法

entry: {

index: './src/index.js',

home: './src/home.js',

page: './src/page.js'

},

//3.出口文件设置{对打包好的文件格式化文件名+修改出口文件夹}

output: {

filename: '[name].[hash:8].js',

path:path.join(__dirname,'release')

},

//4.插件设置=>具体看文档 此处用到自动生成html

//html中自动导入打包好的js

//其中的template指向预定好的模板

plugins: [

new HtmlWebpack({

template:'./src/index.html'

})

]

}

二、进阶之loaders篇

1、样式

style-loader 将模块的导出作为样式添加到 DOM 中

css-loader 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码

less-loader 加载和转译 LESS 文件

sass-loader 加载和转译 SASS/SCSS 文件

在module中添加规则

module:{

rules:[

{

test:/\.(css|less|scss)$/,

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

}

]

},

注意：要使用 less-loader需要先安装 less-loader和 less

补充：设置全局的颜色less，可在其他地方引用 @import xxx

//base.less

@primary-color:#ccc;

@background-color:#000;

//index.less

@import './base.less';

.haha{

color: @primary-color;

background-color:@background-color

}

2、如何build出对应的样式文件

需要安装对应插件从 bundle 中提取文本(CSS)到单独的文件

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

将webpack.config.js的module修改一下

1、通过require引入该库

2、先在plugins中注册一份ExtractTextPlugin

3、将rules中每一项设置一个use

//1.引入该库

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

module.exports={

//...省略代码...

//2.在plugins中注册一份ExtractTextPlugin

plugins: [

new ExtractTextPlugin("style.css")

],

module:{

//3.将rules中每一项设置一个use

//通过ExtractTextPlugin的extract-api 去指定loader

rules:[

{

test:/\.css$/,

use:ExtractTextPlugin.extract({

fallback: 'style-loader',

use: 'css-loader'

})

},

{

test:/\.less$/,

// use:['style-loader','css-loader','less-loader']

use:ExtractTextPlugin.extract({

fallback: 'style-loader',

//如果需要，可以在 sass-loader 之前将 resolve-url-loader 链接进来

use: ['css-loader','less-loader']

})

}

]

}

}

补充 ：可能会报错DeprecationWarning: Tapable.plugin is deprecated. Use new API on '.hooks' instead

此处只需将版本更新即可 npm install extract-text-webpack-plugin@next

3、webpack转换typescript

1、常规转换typescript方式

通过全局安装 tsc

在通过tsc编译ts文件 此时会在ts文件夹下 生成转换后的js文件

//全局安装 tsc

npm install -g tsc

//tsc编译

tsc xxx.ts

2、webpack方式转换typescript

安装ts-loader 和 typescript

yarn add -D ts-loader typescript

修改webpack.config.js文件下的module

module:{

rules:[

{

test:/\.ts$/,

loader:'ts-loader'

}

]

}

添加一个 在根目录下tsconfig.json 文件 【固定写死】

{

"compilerOptions": {

"sourceMap": true

}

}

三、进阶之 热部署

1、 概念：

它允许在运行开发时更新各种模块，而无需进行完全刷新。

换而言之：修改js，vue保存后，即可自动编译+刷新页面 无需重新手动编译

2、热部署方式(1)

引入 webpack const webpack = require('webpack');

增加devServer项 【固定！】

plugins加入插件 new webpack.HotModuleReplacementPlugin()

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

+const webpack = require('webpack');

module.exports = {

entry:{

index:'./src/index.js'

},

mode:'development',

+ devServer:{

+ contentBase:'./dist',

+ hot:true

+ },

plugins:[

+ new webpack.HotModuleReplacementPlugin(),//需要在上方导入webpack

new HtmlWebpack({

title:'hot module',

template:"./src/index.html"

})

]

}

修改package.json 的 指令

安装 热部署的库 npm install -D webpack-dev-server

在scripts中添加dev指令 即运行 webpack-dev-server

"scripts": {

"build": "webpack",

"dev": "webpack-dev-server"

},

注意❌：修改html并不能使用热部署！！ 因为html并没有放在webpack.config.js文件中打包

3、热部署方式(2)

此处放置通过 Node.js API官网链接 实用起来感觉没必要(东西太多+我懒~~)

四、开发和生产环境的不同配置方法

1、定义

开发环境：dev

生产环境：build

常用命令

webpack.config.js

开发环境

dev

mode:'development'

生产环境

build

mode:'production'

2、同时配置方法

设置两个不同的 webpack.prod.config.js 即可 注意 名字不能相同！！！

修改其中的 mode

开发环境下的mode =》mode:'development'

生产环境下的mode =》mode:'production'

修改package.json的命令入口文件

"scripts": {

"build": "webpack --config webpack.prod.config.js",

"dev": "webpack-dev-server --config webpack.config.js"

},

五、手动配置vue的webpack

1、安装vue包和对应的loader

npm install -D vue-loader vue vue-template-compiler

npm install -D babel-loader @babel/core

2、配置webpack.config.js

要想在vue中使用 less lang="less"

需要修改webpack.config.js

//webpack.config.js

const HtmlWebpack = require('html-webpack-plugin')//build生成html

const webpack = require('webpack')

+ const VueLoaderPlugin = require('vue-loader/lib/plugin')//vue的loader

module.exports = {

mode:'development',

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

//热部署

devServer:{

contentBase:'./dist',

hot:true

},

module: {

rules: [

+ {

+ test: /\.vue$/,

+ loader: 'vue-loader'

+ },

// 它会应用到普通的 `.js` 文件

// 以及 `.vue` 文件中的 `