webpack安装部分

1.安装node.js，并设置环境变量

2.全局安装  npm install webpack webpack-cli -g或淘宝镜像cnpm install webpack webpack-cli -g

3.进入你要做的项目，在你的项目里生成npm init

4. 局部安装cnpm install webpack webpack-cli -S

5.打包  webpack

6.因为webpack默认entry：src/index.js  ，默认output : dist/main.js 。

默认main.js一行，通过  webpack --mode production来变成多行；

webpack --mode development变回单行。

 

webpack本身只用于打包js，若要打包HTML、css图片等，需要配置文件

webpack核心：入口（entry）、出口（output）、loader、插件（plugins）、模式

loader用于让webpack支持打包非js文件

plugins从打包优化和压缩，一直到重新定义环境中的变量

1.配置出口、入口：

webpack.config.js

const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js'
    },

cmd指令webpack 

2. 本地服务器：

安装npm install webpack-dev-server -S

配置：webpack.config.js文件里:

const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: "./public",
        inline: true
    }
};

package.json配置：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev":"webpack-dev-server --open --inline" },

cmd指令：npm run dev 

中间如果有错误记得查看一下这两个文件的格式是否有错！！！

3.loader：

安装loader：cnpm install style-loader css-loader -S

配置webpack.config.js:

module:{
    rules:[
        {test:/\.css$/,use:['style-loader','css-loader']},
        {test:/\.(jpg|png|jpeg|gif)$/,use:['file-loader']}
    ]
}

cmd命令：webpack 

根据https://blog.csdn.net/xuelang532777032/article/details/65445604?locationNum=2&fps=1webpack loader一览表

4.webpack插件：

例子：html-webbpack-plugin插件

src：开发阶段（写代码），包括html,css,js,jpg等文件

出口里的目录：例public文件夹则是生产阶段（项目上线），也包括src里的文件

安装cnpm install html-webpack-plugins -S

配置webpack.config.js：

const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    //....
    plugins:[
        new HtmlWebpackPlugin({
            template:"./src/index.html",  //,filename:"a.html"等
            minify:{
                removeAttributeQuotes:true,//去除多余引号
                removeComments:true,// 去除注释
                removeEmptyAttribute:true,// 去除空属性
                collapseWhitespace:true// 去除空格回车

            }

cmd命令：webpack