webpack学习用法总结

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 [email protected] -g 可以规定webpack的安装版本

2.初始化

webpack学习用法总结_第1张图片
webpack初始化

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版权所有')
webpack学习用法总结_第2张图片
版权注释

多个第三方类库抽离

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配置中的目录
}])
webpack学习用法总结_第3张图片
静态资源打包输出

json配置文件使用

入口文件中引用json

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

打包命令

webpack

运行

npm run server

总结

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

你可能感兴趣的:(webpack学习用法总结)