webpack学习用法总结-CSDN博客

github源码地址 https://github.com/ghshuo/webpack-demo

webpack介绍

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
复制代码

学习文档 :

webpack官网: http://webpack.github.io/
webpack文档(英文): https://webpack.js.org/
webpack文档(中文): https://doc.webpack-china.org/

安装

1.全局安装webpack

npm install webpack -g
npm install webpack@3.xx -g 可以规定webpack的安装版本
复制代码

2.初始化

3.项目中局部安装

npm install webpack --save-dev
复制代码

webpack.config.js配置

1.entry选项（入口配置）

 entry:{
        entry: './src/entry.js',
    }
复制代码

2.entry选项（出口配置）

 output:{
        path: path.resolve(__dirname,'dist'), // 出口地址 绝对路径
        filename:'[name].js' // //输出的文件名称
}

复制代码

3.module模块

解读css

安装

npm install style-loader --save-dev
npm install --save-dev css-loader
复制代码

module模块中配置

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

配置图片

* npm install --save-dev file-loader url-loader
* file-loader 解决引用路径的问题
* url-loader 如果图片较多，会发很多http请求，会降低页面性能。
复制代码

{  // 配置图片
    test: /\.(png|jpg|gif)/,
    use:[{
        loader:'url-loader',  // url-loader
        options:{
            limit:400000, // 是把小于400000B的文件打成Base64的格式
            outputPath:'images/'  //  把图片打包到指定路径下
        }
    }]
}
复制代码

直接在文件中引用img图片

npm install html-withimg-loader --save
复制代码

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

4.plugins插件

压缩代码

 * 引入： 不需要安装 const uglifyJsPlugin = require('uglifyjs-webpack-plugin');
复制代码

  配置
  plugins:[
     new uglifyJsPlugin()   
  ]
复制代码

html 打包

* npm install --save-dev html-webpack-plugin
复制代码

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

plugins:[
      new htmlPlugin({
          minify:{
              removeAttributeQuotes:true  // minify：是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号。
          },
          hash:true, // 为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
          template:'./src/index.html' //是要打包的html模版路径和文件名称
      })
  ]
复制代码

5.热更新功能

npm install webpack-dev-server --save-dev
复制代码

再设置

devServer:{
    //设置基本目录结构
    contentBase:path.resolve(__dirname,'dist'),
    //服务器的IP地址，可以使用IP也可以使用localhost
    host:'localhost',
    //服务端压缩是否开启
    compress:true,
    //配置服务端口号， 可以自己设置端口号
    port: 1818
}

复制代码

一般直接启动 npm run server 查看就能进行热更新

如果不能进行热更新添加 HotModuleReplacementPlugin插件

plugins 中配置

new webpack.HotModuleReplacementPlugin()
复制代码

6.CSS分离与图片路径处理

把CSS单独提取出来，分离css

npm n install --save-dev extract-text-webpack-plugin
复制代码

const extractTextPlugin = require("extract-text-webpack-plugin");
plugins[
  new extractTextPlugin("/css/index.css")
]
再配置下模块
module:{
    rules:[
       {
          test: /\.css$/,
          use: extractTextPlugin.extract({
            fallback: "style-loader",
            use: "css-loader"
          })
        }
    ]
}

分离出来之后css路径不正确 需要下面修改下
var filePath = {
    publicPath: "http://localhost:1818/"  // 声明一个路径  处理静态文件路径
}
//出口文件的配置项
    output:{
        publicPath:website.publicPath
    }

复制代码

安装css预编译语言

1.less

npm install --save-dev less
npm install --save-dev less-loader
复制代码

webpack.config.js 配置less

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

复制代码

less 分离

npm n install --save-dev extract-text-webpack-plugin
const extractTextPlugin = require("extract-text-webpack-plugin");
plugins[
  new extractTextPlugin("/css/index.css")
]

use:extractTextPlugin.extract({
    use:[{
        loader:'css-loader'
    },{
            loader:'less-loader'
        }],
    fallback:'style-loader'
})
复制代码

2.sass

npm install --save-dev node-sass
npm install --save-dev sass-loader
复制代码

{
    test: /\.scss$/,
    use: extractTextPlugin.extract({
        use: [{
            loader: "css-loader"
        }, {
            loader: "sass-loader"
        }],
        fallback: "style-loader"
    })
}
复制代码

自动处理css3属性前戳

需要安装两个包postcss-loader 和autoprefixer（自动添加前缀的插件）

npm n install --save-dev postcss-loader autoprefixer
复制代码

在webpack.config.js同级目录下新建一个postcss.config.js文件

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}
复制代码

loader配置

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

消除未使用的CSS

安装PurifyCSS-webpack

npm i -D purifycss-webpack purify-css
复制代码

引入glob 因为我们需要同步检查html模板，所以我们需要引入node的glob对象使用。在webpack.config.js文件头部引入glob。

constc  glob = require('glob');
复制代码

引入purifycss-webapck

constc  PurifyCSSPlugin = require("purifycss-webpack");
复制代码

配置plugins

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

babel

把es6 转化成es5 语法

npm i -D babel-loader babel-core babel-preset-env babel-polyfill
复制代码

module中配置

{
    test:/\.(jsx|js)$/,
    use:{
        loader:'babel-loader',
    },
    exclude:/node_modules/
}
复制代码

配置babel预设文件在根目录下创建一个.babelrc文件

{
  "presets": ["env"]
}
复制代码

打包调试

source-map:在一个单独文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度； cheap-module-source-map:在一个单独的文件中产生一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号）,会对调试造成不便。 eval-source-map:使用eval打包源文件模块，在同一个文件中生产干净的完整版的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定要不开启这个选项。 cheap-module-eval-source-map:这是在打包文件时最快的生产source map的方法，生产的 Source map 会和打包后的JavaScript文件同行显示，没有影射列，和eval-source-map选项具有相似的缺点。

module.exports = {
  devtool: 'eval-source-map',
  }
}
复制代码

配置生产和开发并行

修改package.json命令

其实就是添加一个dev设置，并通过环境变量来进行区分，下面是package.json里的值。

 "scripts": {
    "server": "webpack-dev-server --open",
    "dev":"set type=dev&webapck",
    "build": "set type=build&webpack"
  }
复制代码

修改webpack.config.js文件

if(process.env.type == "build"){
    var filePath = {
        publicPath: "线上地址/"
    }
}else{
    var filePath = {
        publicPath: "本地地址/"
    }
}
复制代码

打印传递过来的值

console.log( encodeURIComponent(process.env.type) );
复制代码

引用第三方库

安装

npm install --save jquery
复制代码

用plugin 引入 ProvidePlugin插件

constc  webpack = require('webpack');
复制代码

webpack.config.js中plugins配置

plugins:[
    new webpack.ProvidePlugin({
        $:"jquery"
    })
]
复制代码

watch 用法

随着项目大了，项目进行联调时,我们不需要每一次都去打包，使用watch解决了这个麻烦，只要代码进行保存之后会自动进行打包。 watch是webpack中自带插件

watchOptions:{
    //检测修改的时间，以毫秒为单位
    poll:1000, 
    //防止重复保存而发生重复编译错误。这里设置的500是半秒内重复保存，不进行打包操作
    aggregateTimeout:500, 
    //不监听的目录
    ignored:/node_modules/, 
}
复制代码

但是运行这个插件必须要引入webpack

const webpack = require('webpack'); 
复制代码

运行webpack --watch 进行打包

添加注释版权所有

BannerPlugin插件 js上添加z注释是谁写的，创建时间，都可以进行设置

 new webpack.BannerPlugin('hsgeng版权所有')
复制代码

多个第三方类库抽离

npm instawll vue --save
npm install --save jquery
复制代码

入口文件配置

entry:{
    entry:'./src/entry.js',
    jquery:'jquery',
    vue:'vue'
}
复制代码

new webpack.optimize.CommonsChunkPlugin({
    //name对应入口文件中的名字，我们起的是jQuery
    name:['jquery','vue'],
    //把文件打包到哪里，是一个路径
    filename:"assets/js/[name].js",
    //最小打包的文件模块数，这里直接写2就好
    minChunks:2
})
复制代码

静态资源输出

项目中有些没有引用的静态资源（图片、开发文档），想在打包的时候保留这些静态资源，可以直接打包到指定的文件夹下面

安装

npm install --save-dev copy-webpack-plugin
复制代码

引入

const copyWebpackPlugin= require("copy-webpack-plugin");
复制代码

plugins 进行配置

new copyWebpackPlugin([{
    from:__dirname+'/src/public', // 要打包的静态资源目录地址
    to:'./public' // 要打包到的文件夹路径，跟随output配置中的目录
}])
复制代码

json配置文件使用

入口文件中引用json

var json =require('../config.json');
document.getElementById("json").innerHTML= json.name;

复制代码

打包命令

webpack

运行

npm run server

总结

学习webpack过程中进行了总结。如果有什么不对地方，请大家指正一下，谢谢！