webpack学习笔记

最新推荐文章于 2024-10-14 08:34:05 发布

前端小易

最新推荐文章于 2024-10-14 08:34:05 发布

阅读量706

点赞数

分类专栏： webpack 文章标签： Webpack学习笔记

本文链接：https://blog.csdn.net/ycl396232695/article/details/79359793

版权

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Webpack学习笔记

https://doc.webpack-china.org/concepts/ webpack的官方文档

第一节:安装 webpack

1、打开命令行，cd 到 F 盘，

输入命令: mkdir webpack-demo (mkdir:创建新文件夹) 然后 cd 到 webpack-demo，

输入命令:npm install -g webpack (-g:全局安装) 在全局安装 webpack

2、webpack 官方不建议全局安装，而是在项目本地安装。

项目本地安装需要先初始化 npm:

2.1、命令行输入 npm init 先初始化本地 package.json 文件

package name(文件名称,必须填写):

version(版本,可填,默认为1.0.0):

description(描述):

entry point(入口文件):

test command():

git repository:

keywords:

author(作者):

license:

2.2、完成后继续输入命令 npm install --save-dev webpack 安装默认版本

2.3、也可以【npm install --save-dev webpack@3.6.0】指定安装 webpack3.6.0版本

备注: --save 安装到生产环境中 -dev 安装到开发环境中;局部安装打包需要在pack.json中配置

"scripts": {"build": "webpack"},

第二节:快速上手一个demo

1、webpack 旧版本升级新版本的方法:

先删除 node_modules 文件夹,再将package.json 文件中 devDependencies 里面的 webpack 参数改为需要更新的版本号,然后在当前目录下执行 npm install 就会更新到指定的 webpack 版本

2、建立基本的项目结构

2.1、建立 src 文件夹(源代码文件夹)

2.2、建立dist 文件夹(生产环境的文件夹)

2.3、在dist 目录下建立index.html 文件

2.4、在src目录下建立entery.js(入口文件)

document.getElementById('title').innerHTML='Hello World';

2.5、命令行运行 webpack src/entery.js dist/bundle.js

3、安装 live-server 服务器,为以后的学习做准备,命令行运行

npm install -g live-server

4、命令行输入 live-server 启动服务器

第三节:配置入口和出口

1、配置文件webpack.config.js的基本结构

1.1、在src目录下建立 entery.js 和 entery2.js,在index.html中引入这两个js文件

1.2、在package.json的同级目录下新建 webpack.config.js 文件

const path = require('path');
module.exports = {
  entry: {
    entery: './src/entery.js',
    entery2: './src/entery2.js'
  },
  output: {
    path: path.resolve(__dirname,'dist'),
    filename: '[name].js'
  },
  module: {},
  plugins: [],
  devServer: {}
}

1.3、命令行运行 webpack 再启动 live-server

第四节:配置服务器热更新

1.1、在 webpack.config.js中配置 devServer

devServer: {
  contentBase: path.resolve(__dirname,'dist'),
  host: '192.168.6.13',
  compress: true,
  port: 8087
}

contentBase:配置需要运行目录的路径,一般为绝对路径

host: 配置服务器地址

compress: 压缩参数

port: 配置端口号

1.2、安装 webpack-dev-server 插件,命令行运行

npm install webpack-dev-server --save-dev

1.3、在package.json 文件中配置

"scripts": {
"server": "webpack-dev-server"
}

1.4、命令行运行 npm run server ，再将运行成功的服务器地址输入到浏览器地址栏中就能实现热更新了(注意,配置热更新 webpack 版本必须是3.6以上才行,否则会失败)

1.5.如果热更新配置好之后还是无法实现热更新,再在plugins中配置

new webpack.HotModuleReplacementPlugin(), //用于热更新不能正常使用时的配置

第五节:打包 css 代码

1、首先要安装style-loader,用于处理css中的url,命令行运行

npm install style-loader --save-dev

2、还要安装css-loader,用于样式的处理,比如 id、class等,命令行运行

npm install css-loader --save-der

3、在js文件中引入css 文件,例:import css from ’./css/index.css’

4、在webpack.config.js文件中配置 module 参数

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        {loader: 'style-loader'},
        {loader: 'css-loader'},
      ]
    }
  ]
},

5、命令行运行 npm run server 启动服务器

第六节: 打包 js 代码

1、在webpack.config.js配置文件中引入插件 uglify

const ugligy = require('uglifyjs-webpack-plugin');

2、在plugins中配置

plugins: [
new ugligy()
],

3、命令行运行 webpack ,不能直接运行 npm run server,会报错

第七节: 打包 html 代码

1、在src目录下建立index.html文件,将dist目录下的index.html文件删除

2、安装 html-webpack-plugin 插件,命令行运行

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

3、在webpack.config.js文件中引入

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

4、在webpack.config.js文件中配置 plugins 参数

plugins: [
// new ugligy()
  new htmlPlugin({
    minify: {
      removeAttributeQuotes: true //去掉html代码中一些属性的 ""
    },
    hash: true, //每次压缩都生产不同的js名称,不会出现浏览器缓存
    template: './src/index.html' //需要打包的模板文件路径
  })
],

5、删除 dist 目录,命令行运行 webpack,会自动打包生产新的dist目录及所有文件

6、命令行运行 npm run server, 在浏览器中输入相应的地址和端口号,可以热更新

第八节: css中引用图片的处理

1、安装 file-loader 和 url-loader 插件,命令行运行

npm install --save-dev file-loader url-loader

2、在webpack.config.js文件中配置 module 参数

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        {loader: 'style-loader'},{loader: 'css-loader'},
      ]
    },
    {
      test:/\.(png|jpg|gif)/,
      use: [

{loader: 'url-loader',options: {limit: 5000}}

]
}
]
},

options中 limit:5000 ,当图片大小小于这个值时,就打包成代码的形式

第九节: css分离和分离之后图片路径的基本处理

1、先安装extract-text-webpack-plugin 插件,命令行运行

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

2、在webpack.config.js文件中引入

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

3、在plugins中配置

new extractTextPlugin('/css/index.css')

4、在module中配置

module: {
  rules: [
    {
      test: /\.css$/,
     // use: [{loader: 'style-loader'},{loader: 'css-loader'},]
      use: extractTextPlugin.extract({
        fallback: 'style-loader',
        use: 'css-loader'
      })
    },
    {
      test:/\.(png|jpg|gif)/,
      use: [{loader: 'url-loader',options: {limit: 5000}}]
    }
  ]
},

5、配置output出口文件参数

output: {
  path: path.resolve(__dirname,'dist'),
  filename: '[name].js',
  publicPath: 'http://192.168.6.13:8087/'
},

publicPath:配置url为服务器的绝对路径,避免打包之后找不到图片的问题

第十节: html中的图片打包

1、先安装 html-withimg-loader插件,命令行运行

npm install --save-der html-withimg-loader

2、在module中配置 loader参数

{
test: /\.(html|htm)$/i,
use: ['html-withimg-loader']
}

第十一节: 打包和分离LESS

1、安装 Less 的服务，命令行运行

npm install --save-dev less

2、安装 Less-loader 用于打包,命令行运行

npm install --save-dev less-loader

3、在webpack.config.js中配置loader

{
  test: /\.less$/,
  use: [
    { loader: 'style-loader' },
    { loader: 'css-loader' },
    { loader: 'less-loader' }
  ]
}

4、编写一个less文件

@base :#000;
#gogo{
  width:300px;
  height:300px;
  background-color:@base;
}

5、引入到entery.js文件中

import less from './css/black.less';

6、命令行运行 webpack 打包

7、把less文件分离,在webpack.config.js中配置extractTextPlugin

{
  test: /\.less$/,
// use: [{loader: 'style-loader'},{loader: 'css-loader'},]
  use: extractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      {loader: 'css-loader'},
      {loader: 'less-loader'}, //用于less文件分离
    ]
  })
},

8、命令行运行 webpack 打包

第十二节: 打包和分离SASS

1、安装Sass 打包用的 loader,这里需要安装两个包.node-sass 和 sass-loader

node-sass:因为sass-loader依赖于node-sass,所以需要先安装node-sass,命令行运行

npm install --save-dev node-sass

npm install --save-dev sass-loader

注意:在npm安装时,这个loader很容易安装失败,最少使用cnpm来安装,如果一直安装报错,最好是把node-modules文件夹删除后,再重新安装。

2、在webpack.config.js中配置loader

{
  test: /\.scss$/,
  use: [
    { loader: "style-loader" }, // creates style nodes from JS strings
    { loader: "css-loader"   }, // translates CSS into CommonJS
    { loader: "sass-loader" }// compiles Sass to CSS
  ]
}

注意:这里需要注意loader的加载要有先后顺序。

3、编写一个less文件

$nav-color: #FFF;
#nav {
  $width: 100%;
  width: $width;
  height:30px;
  background-color: $nav-color;
}

npm run server 来看看结果

4、把less文件分离,在webpack.config.js中配置extractTextPlugin

{
  test: /\.scss$/,
// use: [{loader: 'style-loader'},{loader: 'css-loader'},]
  use: extractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      {loader: 'css-loader'},
      {loader: 'sass-loader'}, //用于sass文件分离
    ]
  })
},

5、命令行运行 webpack 打包

第十三节: postcss自动添加css属性前缀

1、安装postcss-loader 和 autoprefixer

npm install --save-der postcss-loader autoprefixer

2、在package.json同级目录新建postcss.config.js文件,并配置参数

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

3、在webpack.config.js中配置css-loader

{
  test: /\.css$/,
// use: [{loader: 'style-loader'},{loader: 'css-loader'},]
  use: extractTextPlugin.extract({
    fallback: 'style-loader',
    use: [
      {loader: 'css-loader',options:{importLoaders:1}},
      {loader: 'postcss-loader'}
    ]
  })
},

4、命令行运行 webpack 代码打包

第十四节:消除无用的css

1、安装purifycss插件

npm install --save-dev purifycss-webpack purify-css

2、在webpack.config.js中引入 glob 插件

const glob = require('glob');

const PurifyCSSPlugin = require('purifycss-webpack');

3、配置 plugins 参数

new PurifyCSSPlugin({
paths:glob.sync(path.join(__dirname,'src/*.html'))
}),

第十五节:Babel转换ES6

1、安装babel-core 、 babel-loader 、 babel-preset-es2015 三个插件包

npm install --save-dev babel-core babel-loader babel-preset-es2015

2、在webpack.config.js中配置

{
  test: /\.js$/,
  use: [
    {loader: 'babel-loader'},
  ],
  exclude: /node_modules/, //转换前先剔除掉 node_modules 文件夹
}

3、在package.json文件的同级目录新建 .babelrc 文件,这是babel的配置文件,然后配置参数

{
"presets": ["es2015"]
}

4、命令行运行 webpack 打包

5、安装babel-preset-env插件包,用于es6、es7、es8的转换

npm install --save-dev babel-preset-env

6、在.babelrc文件中配置

{
"presets": ["env"]
}

7、命令行运行 webpack 打包

第十六节:打包后的代码调试

1、配置调试环境,在webpack.config.js中配置

module.exports = {
devtool: 'eval-source-map', //用于开发环境下的打包调试
}

开发阶段用于打包调试的配置大致可分为以下四种

source-map 独立的 map 文件,有行和列的提示

cheap-moudle-source-map 独立的 map 文件,只有行的提示,没有列

eval-source-map 适用于开发阶段,有行和列的提示

cheap-moudle-eval-source-map 有列的提示

第十七节:开发和生产环境并行

1、开发环境依赖包和生产环境依赖包的配置区分

"devDependencies": {} //开发环境依赖包的配置

"dependencies": {}//生产环境依赖包的配置

2、如果是老项目安装,只安装生产环境依赖包的话

npm install --production

3、如何配置开发环境和生产环境的打包命令

3.1、在package.json中配置

"scripts": {
  "server": "webpack-dev-server --open",
  "build": "set type=build&webpack",
  "dev": "set type=dev&webpack"
},

3.2、在webpack.config.js中配置

if (process.env.type=="build") {
var website = {publicPath:'http://192.168.6.13:8087/'}
}else {
var website = {publicPath:'http://192.168.6.13:8088/'}
}

4、命令行运行

npm run dev ; 打包到开发环境

npm run build;打包到生产环境

第十八节:模块化配置

1、在package.json文件的同级目录新建文件夹 config,用于模块化配置,然后建立一个模块entry.js，入口文件配置

const entry = {};
entry.path = {
entry: './src/entery.js',
};
module.exports = entry;

2、在webapck.config.js中引入entry模块

const entry = require('./config/entry');

3、然后将入口文件的配置改为

entry: entry.path,

4、打包运行,模块化配置成功

第十九节:打包第三方类库--以引入jquery为例

1、安装jquery

npm install --save jquery

2、如果只是局部使用,比如在entery.js中使用的话，先引入

import $ from 'jquery';

3、如果需要在整个项目中使用的话,需要在webpack.config.js中配置plugin参数

new webpack.ProvidePlugin({ $: 'jquery' }),

4、在entery.js中使用 jquery

$('#haha').html('看到老子你就成功');

5、npm run build 打包

第二十节:watch的正确使用方法,配置热打包参数

1、在webpack.config.js中和plugins平级添加配置项 watchOptions

watchOptions: {
  poll: 1000, //监测时间1000毫秒
  aggregateTimeout: 500, //防止重复按保存键时重复打包出错
  ignored: /node_modules/, //打包时不监测的文件夹
}

2、命令行运行 webpack -watch

3、在package.json 中配置 dev 参数

"dev": "set type=dev&webpack --watch"

4、命令行运行 npm run dev 也可以实现热打包

扩展小技巧: 如果是多人共同开发一个项目,需要在各自的打包文件前面加上版权配置项,来区分打包后的代码是谁写的,可以在plugins中配置参数

new webpack.BannerPlugin('版权配置项'),

第二十一节:webpack 优化黑技能,平常开发时常用的小技巧

1、优化打包第三方类库,打包时将没有用到的第三方插件不进行打包,配置方法:

1.1、尽量不使用 import 的方法来引入第三方类库

1.2、在webpack.config.js中配置 webpack.ProvidePlugin 参数

new webpack.ProvidePlugin({ $: 'jquery' }),

这样配置的话,如果项目中没有使用的第三方类库,就不会被打包进去

第二十二节:webpack 集中打包静态资源

1、安装copy-webpack-plugin插件

npm install --save-dev copy-webpack-plugin

2、在webpack.config.js中引入

const copyWebpackPlugin = require('copy-webpack-plugin');

3、配置plugins参数

new copyWebpackPlugin([{
from: __dirname+'src/public',
to: './public'
}]),

第二十三节:Json配置文件使用

1、在package.json文件的同级目录新建config.json文件,配置参数

{
"name": "湖南交通计划",
"webSite": "https://www.hnjtjh.com:6661/traffic_index/Dynamic_work.php"
}

2、在index.html中写入代码

3、在入口文件entery.js中配置

let json = require('../config.json');
document.getElementById('json').innerHTML = json.name+':webSite='+json.webSite;

第二十四节: webpack实战,构建 react开发环境

1、新建项目目录 webpack-react

2、npm init 项目初始化,生成package.json文件

3、npm install --save-dev webpack

4、新建 webpack.config.js 文件用于webpack的配置

5、新建app文件夹,在文件夹中建立index.js

6、配置webpack.config.js参数，把入口和出口先配置出来

const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname,'dist')
  }
}

7、在package.json同级目录建立index.html文件

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>webpack配置开发环境实战</title>
</head>
<body>

</body>
<script src="./dist/index.js"></script>
</html>

8、在index.js中写入测试代码

function component() {
  var element = document.createElement('h1');
  element.innerHTML = '老子是来打酱油的'
  return element;
}
document.body.appendChild(component());

9、在package.json中配置打包命令

"scripts": {
"build": "webpack"
},

10、安装webpack服务器

npm install --save-dev webpack-dev-server

11、在webpack.config.js中配置服务器地址和端口号

devServer: {
  contentBase: './',
  host: '192.168.6.13',//本机地址
  compress: true,
  port: 8787
}

12、在package.json中配置打包命令

"scripts": {
"build": "webpack",
"server": "webpack-dev-server --open"
},

13、命令行打包 npm run build

14、在webpack.config.js中配置output参数

publicPath: 'temp/' //缓存文件夹，用于随时更新

15、在index.html中修改引入js的src

16、命令行打包 npm run build , 实现代码修改热更新

17、安装babel和react所需要的依赖包

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

18、在webpack.config.js中配置loaders参数

module: {
  loaders: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loaders: "babel-loader",
      query: {
        presets: ['es2015','react']
      }
    }
  ]
}