webpack初始用配置

一、创建webpack 4x项目

1、安装node.js

2、创建一个目录

3、使用命令行进入当前创建的目录

4、使用命令行进行项目的初始化 npm init

5、安装webpack （npm install webpack webpack-cli --save-dev）

6、安装完成后会在当前目录下产生两个文件。一个是node_modules文件夹。一个是package.json的文件

7、webpack默认执行的打包地址是src/index.js,所以要把代码放在src目录下

8、在package.json中添加这两个对象

1 "scripts": {
3 "test": "echo \"Error: no test specified\" && exit 1",
5 "dev": "webpack --mode development",
7 "build": "webpack --mode production"
9 },

需要补充的是，刚才输入的 --save-dev 的含义是： 

①将所安装的包分类到开发模式下 
②将安装过的包写入到 package.json 配置文件

9、使用webpack 测试打包

10、要想使用npm run dev代替webpack --mode development命令。那么必须要在当前目录下安装npm install webpack-cli -D

https://blog.csdn.net/u012443286/article/details/79504289

二、Webpack打包多个js文件

使用 require("./world.js"); 引入js重新打包即可

三、 Webpack引入css进行打包

1、先安装style-loader 和 css-loader

2、Npm install css-loader style-loader --save-dev

3、引入 require("style-loader!css-loader!./sty.css"); 进行打包（style-loader必须在前面）

4、css-loader 处理css文件

5、styles-loader 使页面加上style样式

四、Webpack配置HTML 动态加载js（带有hash值的js）

1、安装插件 npm install html-webpack-plugin --save-dev

五、Webpack.config.js 的常用配置

 1 var Webpack = require("webpack");
 2 var htmlWebpackPlugin = require("html-webpack-plugin");
 3 module.exports = {
 4     //     entry: './src/index.js', // 单个入口文件配置
 5     //    entry: ['./index.js','./index2.js'], // 多个入口文件配置（数组模式）
 6     entry: { // 对象模式
 7         mian: './main.js',
 8         index: './index.js',
 9     }
10     output: {
11         path: __dirname + '/dist/js', // 打包后的目录
12         //        filename: "bundle.js"   如果是单个入口文件的话可以写成一个死名称
13         filename: '[name]-[hash].js', // 如果是多个入口文件的话，可以使用这样配置，生成的打包文件时是入口文件的名称+当前打包的文件的hash值
14         publicPath: 'http://www.baidu.com' // 设置打包后的js的前面的绝对路径地址
15     },
16     plugins: [
17         new htmlWebpackPlugin({
18             template: 'index.html', // 使用指定的模板进行生成文件
19             filename: 'index-[hash].html', // 生成的文件名
20             inject: 'head', // body 生成文件时script的存放位置
21             chunk: ['main'], // 引入哪一个js
22         //    excludeChunks: ['index'], // 引入除了当前之外的js
23             minify: {
24                 removeComments: true, // 删除注释    
25                 caseSensitive: false, //是否大小写敏感
26                 collapseBooleanAttributes: true, //是否简写boolean格式的属性如：disabled="disabled" 简写为disabled 
27                 collapseWhitespace: true //是否去除空格
28             }
29         })
30     ]
31 }