webpack从入门到放弃

准备

首先确实自己电脑安装了node

node -v

也可以使用命令把node升级到最新的稳定版

npm i -g n
n stable

初始化项目

mkdir demo
cd demo
npm init

然后安装 webpack

npm install webpack -g

这个时候,就全局安装了webpack命令,注意,只是全局安装了webpack命令,并不是指在任意项目下就可以直接使用webpack了,这个时候,我们就要在项目内安装webpack的包与相关依赖

npm install webpack --save-dev

这个时候,我们的webpack就安装好了

最简单的使用

我们编写一个a.js

module.exports = {
    test:function(){
        console.log('hello world')
    }
}

然后再编写一个b.js

const haha = require('./a.js')
haha.test()

这个时候,我们在命令行执行一下

node b.js

发现输出了 hello world,说明在b.js中成功的引用了a.js中的模块.这个时候,我们试一下webpack打包

webpack b.js build.js

然后就生成了一个build.js文件.我们也在命令行执行一下

node build.js

发现也输出了hello world .说明build.js成功的把a.js与b.js中的内容整合到自身中

使用webpack.config.js

当然,每次输入 webpack b.js build.js 会显得很麻烦,这个时候,我们就可以使用webpack.config.js来进行配置了

module.exports = {
  entry: {
    build: './b.js',
  },
  output: {
    filename: '[name].js?v=[hash]',
  }
};

这个时候,我们就可以直接在命令行输入 webpack 这个就在以达到之前一样的目的

webpack编译输出的含义

Hash: 表示当前文件的hash值
Version: 表示当前所使用的webpack版本
Time: 表示当前编译所使用的时间

Asset	Size	Chunks	Chunk Names
文件位置	文件大小	文件引用其它资源数量	文件引用其它资源名称

引用的插件名称
引用插件的编译过程

配置命令行快捷方式

npm run

我们可以使用上诉命令查看,在本项目下有哪些可以快速执行的命令,还可以自行配置,在package.json中,scripts就是我们自行配置命令的地方.

比如我们添加一条:
“build”:”webpack”

这样,我们在命令行里运行

npm run build

就可以执行里面的命令了,这一点在配置参数比较的时候非常有用

配置浏览器自动刷新

首先,我们要安装相关插件

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

这个时候,我们在package.json里面的scripts 中添加

"dev":"webpack-dev-server --env development",
"build":"webpack --env production"

其中 –env development 与 –env production 是指的是node环境,分别指的是开发环境与生产环境.
这个时候,我们就可以启动

npm run dev

来启动本地服务,并且自动更新.当然这个时候,我们进行的是全部刷新.当然我们可以这么配置package.json来进行热更新

"dev":"webpack-dev-server --env development",
"build":"webpack --hot --env production"

样式文件加载

首先在相关页面的js中引入css文件

import './cssPath'

要安装相关loader
- 使用css

npm install css-loader style-loader postcss-loader  --save-dev

然后再创建一个postcss.config.js文件,在里面输入,这个主要用于自动添加浏览器前缀

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

然后在webpack.config.js中配置相关内容

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

注意,loader加载顺序是从右往左

使用es6

首先要安装相关插件

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

然后配置 .babelrc 文件

{
    "presets":["es2015"],
    "plugins":[]
}

然后配置webpack.config.js

module:{
    rules:[
      {
        test: /\.js/,
        use: ['babel-loader'],
      },
    ],
  },

压缩文件

首先要安装相关插件

npm install babel-preset-minify --save

然后配置webpack.config.js

const BabiliPlugin = require('babel-preset-minify');

plugins: [
    new BabiliPlugin(),
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false,
            drop_debugger: true,
            drop_console: true
        }
    }),
  ],

抽出公共部分重复使用

首先编写一个vendor.js,里面主要是用于管理导入库(我一般的作法是把项目中所有引用的库在这里面再引用一遍)

import Vue from 'vue'
import .... from ...

然后配置webpack.config.js

//entry 中的内容添加
vendor : './vendor.js'

//plugins中的内容添加
new webpack.optimize.CommonsChunkPlugin({
    names: ['common','vendor']
})