webpack简单配置

一、需要的npm

1、webpack三大件

webpack 4.29.0
webpack-cli 3.2.1
webpack-dev-server 3.11.0

2、处理js

处理js ->es6/7/8

6
babel-loader @7.0.0
babel-core
babel-preset-env

7
babel-plugin-transform-runtime

8
babel-plugin-transform-decorators
babel-plugin-transform-decorators-legacy

3、处理css

处理css样式

1.css处理
css-loader
style-loader

2.less处理成css
less-loader
less

3.sass处理成css
sass-loader
node-sass

4.css兼容问题
postcss-loader 配合 autoprefixer 使用
autoprefixer

4、处理模板

处理模板

ejs-loader 处理ejs、tpl文件 v0.3.5

5、处理html

处理html

html-webpack-plugin v4.5.1
html-loader

二、创建工程目录

src
	- js
		index.js
	- index.html
webpack.config.js	
package.json

三、搭建webpack

1、安装npm相关插件

--save-dev   -D
安装在开发环境下的
--save       -S
安装在生产环境下的

如果没有安装cnpm，可以在后面添加切换下载源
--registry=https://registry.npm.taobao.org

2、配置webpack.config.js

module.exprots = {
    mode:"development",
    entry:{
        index: path.join(__dirname,"./src/js/index.js")
    },
    output:{
        path: path.join(__dirname,"./dist"),
        filename:"js/[name].js"
    },
    module:{
      	rules:[{
            test:/\.js$/,
            loader:"babel-loader",
            exclude:path.join(__dirname,"node_modules")
        },{
            test:/\.css$/,
            use:["style-loader","css-loader"]
        },{
            test:/\.scss$/,
            use:["style-loader","css-loader","sass-loader"]
        },{
            test:/\.tpl$/,
            loader:"ejs-loader"
        }]
    },
    plugins:[
        new HtmlWebPackPlugin({
            filename：index.js,
            template: path.join(__dirname,index.js),
            chunksSortMode: "manual",  /*页面加载脚本的顺序 manual手动*/
            chunks:['index'],
            hash:true,
    	    excludeChunks:['node_modules']
        })
    ],
    devServer:{
        open:true,
        host:"localhost",
        port:"8888"
    }
}

1.mode

打包模式：

development开发模式
production 生产模式。 因为生产所以会进行压缩混淆，删除一些没有用的东西

2.entry

打包的入口文件

entry: path.join(__dirname,Result.js),

打包多个入口函数

entry:{
    index:path.join(__dirname,"./src/js/index.js")
}

3.output

输出文件配置

output:{
    path: path.join(__dirname,"./dist"),  //输出文件的存放位置
    filename:"js/[name].js"      //输出文件的名称
},

4.module

rules（规则）：

值是一个数组，数组每一项都是一个规则，就是我们下载npm相关的loader，在这进行相关配置。

 module:{
     rules:[{ 
         test:/\.js$/,  // 不是测试，是一个正则匹配文件
         loader:"babel-loader",  //相关loader   如果多个loader，可以使用use
         exclude:path.join(__dirname,"node_modules")    //排除
     },{
         test:/\.css$/,
         use:["style-loader","css-loader"]
     }]
 }

5.plugin (插件)

HtmlWebpackPlugin：
new HtmlWebPackPlugin({
    minify:{
        removeComments:true,  	 //去除所有的注释
        collapseWhitespace:true  //去除所有空格
    },
    filename:'index.html',    	//指定生成的文件的名称，该文件存在于内存中，在目录中不显示
    template: path.resolve(__dirname,'src/index.html'),   //指定要用到的模板文件
    /*chunks:['index'],   入口文件  */
    files:{   					 //这个页面包含哪些文件 (?)
        js:['js/index.js'],
        chunks:{
            'main':{
                'entry':'dist/bundle.js'
            }
        }    
    },    
    excludeChunks:['node_modules']   /*排除*/
})

6.devServer

启动项

devServer:{
    contentBase:"./",    //用来指定服务器资源的根目录，用来获取静态资源用的。 (?)
    open:true,  	 		//是否启动就打开浏览器
    host:"localhost",    	//域名
    port:"8888"				//端口号
}

3、配置package.json

1.scripts

启动webpack 和 打包
"scripts":{
    "dev": "webpack-dev-server --config webpack.config.js",
    "webpack": "webpack --config webpack.config.js"   
}

四、loader相关配置[早期]

webpack 中 加载器 loader 的基本使用

能处理 css LESS SCSS PostCSS JavaScript Image/Font Vue

1、处理css文件

①运行 npm i style-loader css-loader -D 命令,安装处理css文件的loader
②在 webpack.config.js的 module -> rules 数组中，添加loader 规则如下:

//所有第三方文件模块的匹配规则
    module: {
	rules: [
	    { test: /\.css$/, use: ['style-loader', 'css-loader'] }
	]
    }    

其中，test表示匹配的文件类型，use 表示对应要调用的 loader

2、配置postCSS自动添加css的兼容前缀

①运行 npm i postcss-loader autoprefixer -D命令
②在项目根目录中创建 postcss 的配置文件postcss.config.js,并初始化如下配置:
    
    const autoprefixer = require(' autoprefixer') //导入自动添加前缀的插件
    module.exports = {
        plugins: [ autoprefixer ] // 挂载插件
    }    

③在webpack.config.js的 module -> rules数组中，修改css 的loader 规则如下:

    module: {
        rules: [
            { test:/\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }
        ]
    }   

或者:
    module: {
        rules: [
            { test:/\.css$/, use: ['style-loader', 'css-loader', {
                loader:'postcss-loader',
                options:{
                    plugins:function(){
                        return [autoprefixer('last 5 versions')]
                    }
                }
            }]}
        ]
    } 

3、提起css文件

cnpm i -D mini-css-extract-plugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

修改 webpack.config.js 的 module -> rules，把style-loader 替换成 MiniCssExtractPlugin.loader

    module: {
        rules: [
            { test:/\.css$/, use:[
                MiniCssExtractPlugin.loader,  /*提取css*/
                "css-loader",{
                    loader:'postcss-loader',  /*处理css样式*/
                    options: {
                        plugins:function(){
                            return [autoprefixer('last 5 versions')]
                        }
                    }
                }]}
        ]
    }   

在plugins中添加
new MiniCssExtractPlugin({
    filename:"css/[name].css"   /*css前面不要加 / */
})

4、处理less

①运行npm i less-loader less -D命令
②在 webpack.config.js的module -> rules 数组中，添加loader 规则如下:

    //所有第三方文件模块的匹配规则
    module: {
        rules: [
            { test: /\.less$/, use: [ 'style-loader','css-loader', 'less-loader'] }
        ]
    }     

less与 css相比 多了css嵌套，可读性更直观

5、处理scss

① 运行npm i sass-loader node-sass -D命令
② 在 webpack.config.js的module -> rules 数组中，添加loader 规则如下:

    //所有第三方文件模块的匹配规则
    module: {
        rules: [
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
        ]
    }

6、处理图片文字

① 运行 npm i url-loader file-loader -D命令
② 在 webpack.config.js的 module -> rules 数组中，添加loader 规则如下:

    module: {
        rules: [{
            test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
            loader: ['url-loader?limit=16940']
        }]
    }
或者：
    module: {
        rules: [{
            test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
            loader:"url-loader",
            options: {
                limit: 8 * 1024,
                outputPath:"img"
            }
        }]
    }
    

    其中?之后的是loader 的参数项。
    limit用来指定图片的大小，单位是字节(byte),只有小于limit大小的图片，才会被转为base64 图片

7、处理html中 img 图片（负责引入img）

① 运行 npm i html-loader -D命令
② 在 webpack.config.js的 module -> rules 数组中，添加loader 规则如下:
    module: {
        rules: [{
            test:/\.html$/,
            /*用来处理html中 img图片的（负责引入img）  */
            loader:"html-loader"
        }]
    }

8、处理js文件中的高级语法

// 相关的包
babel-loader@7   默认安装8版本，不推荐
babel-core
babel-preset-env
babel-plugin-transform-runtime
babel-plugin-transform-decorators
babel-plugin-transform-decorators-legacy
// .babelrc
{
  "presets": ["env"],
  "plugins": [
    "babel-plugin-transform-runtime",
    "transform-decorators-legacy"
  ]
}

// 在webpack.config.js 的module -> rules数组中,添加 loader 规则如下:
    {
        test: /\.js$/,
       	use: 'babel-loader',
        exclude:path.resolve(__dirname,'node_modules')
    }     

五、js高级装饰器

1.装饰器 需要配置 .babelrc 文件，以及相关的包

//相关的包
babel-loader@7   默认安装8版本，不推荐
babel-core
babel-preset-env
babel-plugin-transform-runtime
babel-plugin-transform-decorators
babel-plugin-transform-decorators-legacy

// .babelrc
{
  "presets": ["env"],
  "plugins": [
    "babel-plugin-transform-runtime",
    "transform-decorators-legacy"
  ]
}

2.使用装饰器写的js导出

// compute.js
  export default (target)=>{   /*这里的target指的是调用者（类）*/
    target.prototype.jia = function(a,b){
       return a+b;
    };
  }

3.引入

import compute from "../lib/compute";

4.使用装饰器

@compute
export default class Calculator{
    constructor(){
        this.name = "Calculator";
    }
    init(){
        this.jia(3,5)
    }
    init();
}

控制台就会输出个 8；