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

posted @ 2019-01-12 19:24 libingql 阅读(...) 评论(...) 编辑 收藏