webpack学习笔记

目录：

1.建立package.json

2.安装webpack

3.webpack.config.js

1. 建立package.json

　　建立一个package.json文件，使用 npm init命令能够自动建立。（注：使用npm命令需先安装Node.js）

npm init

 　　初始化的package.json：

{
  "name": "libing.webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

package.json

2. 安装webpack

　　全局安装：

npm install -g webpack

　　本地安装（安装到项目目录）：

npm install -D webpack

npm install --save-dev webpack

　　npm install -S module_name：即 npm install module_name --save，写入dependencies。

　　npm install -D module_name：即 npm install module_name --save-dev，写入devDependencies。

　　npm install -g module_name：全局安装（命令行使用）

　　npm install module_name：本地安装（将安装包放在 ./node_modules）

　　dependencies与devDependencies区别：

　　　　◊ devDependencies中的插件：只用于开发环境，不用于生产环境。

　　　　◊ dependencies中的插件：须要发布到生产环境。

　　查看webpack安装版本：

# webpack全局安装
webpack --version

# webpack非全局安装
node_modules/.bin/webpack --version

　　安装webpack-cli：

npm install -D webpack-cli

npm install -D webpack webpack-cli

3. webpack.config.js

　　在项目的根目录下建立webpack.config.js，最基础的配置：

const path = require('path');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
};

　　其中，

　　　　entry：webpack入口起点，指示 webpack 应该使用哪一个模块，来做为构建其内部依赖图的开始。

　　　　output：指示 webpack 在哪里输出所建立的 bundles，以及如何命名这些文件。

　　在package.json文件中添加：

"scripts": {
  "start": "webpack"
},

　　运行命令：

npm start

　　注：npm中start是一个特殊的脚本名称，在命令行中使用npm start就能够执行其对于的命令。

　　　　若是对应的脚本名称不是start，在命令行中运行须要npm run {script name}，如：npm run build

　　生成文件结构：

　　若不修改package.json，运行打包方式：

node_modules/.bin/webpack

4. webpack-dev-server

　　安装webpack-dev-server：

npm install -D webpack-dev-server

package.json增长：

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

webpack.config.js：

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },
  devServer: {
    port: 9000,
    inline: true,
    open: true
  }
};

5. Plugins

5.1 html-webpack-plugin

　　安装html-webpack-plugin：

npm install -D html-webpack-plugin

　　webpack.config.js：

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      minify: {
        removeComments: true,
        collapseWhitespace: true
      }
    }),
  ],
  devServer: {
    port: 9000,
    inline: true,
    open: true
  }
};

5.2 clean-webpack-plugin

　　安装clean-webpack-plugin：

npm install -D clean-webpack-plugin

　　webpack.config.js：

const {
  CleanWebpackPlugin
} = require('clean-webpack-plugin');
const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle-[hash].js'
  },
  plugins: [
    new CleanWebpackPlugin()
  ]
};