webpack安装及简单实践

随着前端的不断发展，涌现出了很多实践方法来处理复杂的前端工程项目，让前端工作人员专注于业务实现，从繁琐的工程管理中解放了出来。其中最明显的就是模块化，模块化可以使得复杂的程序细化为各个小的文件。webpack是一个现代JavaScript应用程序的静态模块打包器。当webpack构建项目的时候，会根据模块之间的依赖关系，将所有模块打包成一个或多个bundle。webpack并不会强制你使用某种模块化方案，而是通过兼容所有的模块化方案让你无痛接入项目。

怎么安装webpack呢？

一、安装node.js

检查你的电脑是否已经安装了node和npm，如果没有安装，可以去node.js官网下载安装包进行下载

二、安装webpack

• 1、全局安装webpack：运行电脑的cmd，进行webpack安装命令的输入：

npm install webpack webpack-cli -g

• 2、局部安装webpack: 可以直接在你的工程项目中局部进行安装webpack

npm install webpack webpack-cli --save-dev

• 3、安装完了之后可以通过以下命令查看是否安装成功：

webpack -v

简单使用webpack

• 1、创建一个文件夹，如：webpack-test，来放置你的工程代码
• 2、在文件夹（webpack-test）下输入以下命令来创建package.json

npm init -y

• 3、在文件夹webpack-test下创建 config文件夹，并创建 webpack.config.js文件放在config中
• 4、在文件夹webpack-test下创建 src文件夹， src下创建 js文件夹，并创建 index.js文件放在js中,在index.js文件中写一些JavaScript代码
• 5、配置webpack.config.js文件

const path = require('path');
module.exports = {
    entry: './src/js/index.js',//需要打包的文件
    output: {
        filename: '[name].js',//输出的文件名叫什么，生成的文件名也叫什么

        // ‘../dist’ --- 相对位置， 表示针对 webpack.config.js 文件的位置再上一级，即与config文件夹同级
        // ‘./dist’ 、 'dist' --- 相对位置 ，表示针对 webpack.config.js文件的位置是同一级，即与webpack.config.js文件同级
        path: path.resolve(__dirname, '../dist'),//指定生成的文件目录
      
    }
}

• 6、运行webpack,对index.js文件进行打包： webpack --config config/webpack.config.js
• 7、配置package.json来简化webpack打包命令 ：“start”: “webpack --config config/webpack.config.js”,然后直接运行 npm start

{
  "name": "es-practise",
  "version": "1.0.0",
  "description": "",
  "main": "config/webpack.config.js",
  "scripts": {
    "start": "webpack --config config/webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0"
  }
}

• 8、配置webpack.config.js文件的打包输出配置项，让webpack打包后生成哈希文件，以此解决缓存问题

const path = require('path');//调用nodejs中的路径
module.exports = {
  entry: './src/js/index.js',//需要打包的文件
  output: {
    // filename: '[name].js',//输出的文件名叫什么，生成的文件名也叫什么
    filename: '[name].[chunkhash:10].js',//增加10位哈希，解决缓存问题---注意：只有当需要打包的文件修改了再重新打开才能生成新的打包文件，否则不会重新打包，还是之前的打包文件

    // ‘../dist’ --- 相对位置， 表示针对 webpack.config.js 文件的位置再上一级，即与config文件夹同级
    // ‘./dist’ 、 'dist' --- 相对位置 ，表示针对 webpack.config.js文件的位置是同一级，即与webpack.config.js文件同级
    path: path.resolve(__dirname, '../dist'),//指定生成的文件目录
  }
}

• 9、安装clean-webpack-plugin插件，用于每次打包前把旧的打包文件进行清理：npm install clean-webpack-plugin --save-dev ,然后进行webpack.config.js的配置

const path = require('path');//调用nodejs中的路径
const cleanWebpackPlugin = require('clean-webpack-plugin').CleanWebpackPlugin;//通过 clean-webpack-plugin插件删除输出目录中之前的文件

module.exports = {
  entry: './src/js/index.js',//需要打包的文件
  output: {
    // filename: '[name].js',//输出的文件名叫什么，生成的文件名也叫什么
    filename: '[name].[chunkhash:10].js',//增加10位哈希，解决缓存问题---注意：只有当需要打包的文件修改了再重新打开才能生成新的打包文件，否则不会重新打包，还是之前的打包文件

    // ‘../dist’ --- 相对位置， 表示针对 webpack.config.js 文件的位置再上一级，即与config文件夹同级
    // ‘./dist’ 、 'dist' --- 相对位置 ，表示针对 webpack.config.js文件的位置是同一级，即与webpack.config.js文件同级
    path: path.resolve(__dirname, '../dist'),//指定生成的文件目录
  },
  plugins: [
    new cleanWebpackPlugin()
  ]
}