webpack——一站到底一

时间 2019-12-10

标签 webpack 到底繁體版

原文原文链接

webpack入门

webpack在逐渐成为一个成熟的青年路上，一直备受你们青睐，
然而还在不断的健身，但愿以最好的姿态呈现给各位，现在他已经v3。
比起1 、2又强化骨骼，变得更坚实。

1、什么是webpack

官方给出：

Webpack 是前端资源模块化管理和打包工具
他能够将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源
还能够将按需加载的模块进行代码分隔，等到实际须要的时候再异步加载。

我的理解：

首先，webpack其实就是前端工程的模块化打包工具
他能够把复杂的程序细化为细小的文件，而后在让各个模块进行加载
其次，天生支持commenjs，由于他就是在nodejs下开发的，但也支持AMD/CMD，方便旧代码的迁移
而后，他能够使得前端开发便捷，能够代替gulp/grunt(接下来会写到)，
好比打包压缩、启动server模块热替换、编译sass less 以及css的抽离、
mock数据、版本控制、devtool源码映射、以及开发、生产环境的切换
最后，webpack的扩展性强，插件机制完善，有效提升开发效率。

2、核心概念

入口 Entry
页面中的入口文件，entry的值有三种类型：字符串、数组、对象css

一、字符串
       entry: './app.js'
   二、数组
       当存在多chrunks时，能够采用数组的形式，好比第三方库bootstrap
       {
         entry: ['./src/index.js', './vendors/bootstrap.js'],
         output: {
           path: './dist',
           filename: "index.js"
         }
       }
       会被打包到index.js中，可是数组的最后一个元素会被export
   三、对象
       设置多个打包的文件
           {   
               entry: {   
                   index: './src/index.js',  
                   header: './src/header.js'   
               } 
           }

出口 Outputhtml

指生成的文件要输出的目录， path、 filename
   output : {
       filename: '[name].js',
       path :__dirname + '/dev/scripts' //必须是绝对路径 __dirname 指的是当前config.js路径
   }
   若是加版本号的话
    filename ： '[name]@[chunk:6hash].js'
    注：版本号的配置有两种方法，我会单独写一篇文章来介绍。。。

加载器 Loader
webpack自己只理解JavaScript，sass、css、html、jpg等文件须要loader进行处理，转换为模块
经常使用的有:
babel-loader前端

用来编译es6+ 
   一、下载：npm i babel-core babel-loader babel-preset-env -D
   注意之前用的是：npm i babel-core babel-loader babel-preset-es2015 babel-preset-state-0
   二、须要在项目根目录建立.babelrc用来预设es6
   {
       "presets" : ["babel-preset-env"]
   }
   eg：
   三、{
       test: /\.js$/,
       exclude : /node_modules/,排除没必要要的js解析
       use : [
           {
               loader : 'babel-loader',//解析es6解析具体经过babel-core
           }
       ]
   },

sass-loader、css-loader、style-loader
下载：npm i css-loader style-loader -D //css loadervue

npm i sass-loader node-sass -D  //编译成css
     eg:
     // 加载css
     {
       test: /\.css$/,
       use: [
         { loader: 'style-loader' },
         { loader: 'css-loader' },//执行的时候从下往上执行
        {loader : 'sass-loader'}
       ]
     }
     sass-loader是编译 sass文件为css文件，css-loader是编译css文件为字符串，
     最后 style-loader把css字符串打入html文件的style标签里，让页面能加载样式。

url-loader
下载：npm i url-loader -Dnode

图片、字体图标加载器，是对file-loader的上层封装,
   支持base64编码。传入的size（也有的写limit) 参数是告诉它图片若是不大于 25KB 的话要自动在它从属的 css 文件中转成 BASE64 字符串。
file-loader: 
下载：npm i file-loader -D 
    加载一些 媒体文件 字体图标等
    // 加载图片
     {
       test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
       loader: 'url-loader',
       options: {
         limit: 1000,
         name: 'media/images/[name].[hash:7].[ext]'
       }
     },

     // 加载媒体文件
     {
       test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
       loader: 'url-loader',
       options: {
         limit: 10000,
         name: 'media/mp4/[name].[hash:7].[ext]'
       }
     },

     // 加载iconfont
     {
       test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
       loader: 'url-loader',
       options: {
         limit: 10000,
         name: 'media/iconfont/[name].[hash:7].[ext]'
       }
     }

vue-loaderjquery

下载：npm i vue-loader -D    加载vue组件

postcss-loaderwebpack

css3加浏览器前缀

插件 Pluginscss3

插件能够帮助webpack进行输出文文件

经常使用的插件有：
(1) html-webpack-plugin 它会在src目录下自动生成一个index.htmles6

配置webpack.config.js中 
   var HtmlWebpackPlugin = require('html-webpack-plugin')
   在plugins : {
       //编译html
       new HtmlWebpackPlugin({
           template : './src/index.html', //源文件
           filename : 'index.html'//目标文件
       })
   }
   注：webpack怎么引入第三方的库 例如jquery
   entry: {
       page: 'path/to/page.js',
       jquery: 'node_modules/jquery/dist/jquery.min.js'
   }
   new HtmlWebpackPlugin({
       filename: 'index.html',
       template: 'index.html',
       inject: true,
       chunks: ['jquery', 'page'] // 按照前后顺序插入script标签
    })

(2) autoprefixer 自动检测各个浏览器加个内核前缀的插件web

安装：cnpm install --save-dev autoprefixer postcss-loader
  配置：
  var autoprefixer = require('autoprefixer');
   loaders:[
       {
         test:/\.css$/,
         //在原有基础上加上一个postcss的loader就能够了
         loaders:['style-loader','css-loader','postcss-loader']
         }
     ]
 },
 postcss:[autoprefixer({browsers:['last 2 versions']})]

(3) extract-text-webpack-plugin 将app.js里的css抽离成.css

装包 npm i extract-text-webpack-plugin -D
 一、var ExtractTextPlugin = require("extract-text-webpack-plugin")
  二、 配置插件 在module中
   module : {
       ...
       plugins : [
           //new 插件的实例
           new ExtractTextPlugin({
               filename : 'style/app.css'
           })
       ]
   }
  三、 对scss进行改造
   {
       test : /\.scss$/,
       use : [
           //css抽离
           ExtractTextPlugin.extract({
               fallback :'style-loader',  //style-loader是把文本放到页面上
               use : ['css-loader','sass-loader']  //从后往前执行
           })
       ] 
   }
   若是

(4)webpack.optimize.UglifyJsPlugin 代码压缩
内置核心插件和 uglifyjs-webpack-plugin 这个插件同样

var webpack = require('webpack')
   在plugins中
   plugin ： {
       ...
       new webpack.optimize.UglifyJsPlugin({
           compress{
               warings:false    //去掉警告
           }, 
           output:{
               comments:false 
           }
       })
   }

(5) open-brower-webpack-plugin 自动在浏览器中打开页面方便开发

下载：npm i open-browser-webpack-plugin -D
   var OpenBrowser = require('open-brower-webpack-plugin')

   plugins : [
       ...
       new OpenBrowser({
           url ： 'http://localhost:4000'
       })
   ]

(6) on-build-webpack 删除以前版本

下载：npm install --save-dev on-build-webpack
   //webpack.config.js
   var WebpackOnBuildPlugin = require('on-build-webpack');
   var fs = require("fs");
   //设置为你的目标文件夹地址
   var buildDir = './dist/';
   ...
   plugin:[
       new WebpackOnBuildPlugin(function(stats) {
           const newlyCreatedAssets = stats.compilation.assets;
           const unlinked = [];
           fs.readdir(path.resolve(buildDir), (err, files) => {
             files.forEach(file => {
               if (!newlyCreatedAssets[file]) {
                 fs.unlink(path.resolve(buildDir + file));
                 unlinked.push(file);
               }
             });
             if (unlinked.length > 0) {
               console.log('删除文件: ', unlinked);
             }
         });    
       })
   ]
续...webpack二——一站到底