webpack基础

webpack基础

环境准备

安装nodejs，去node官网下载，一路确定
在命令提示符中键入npm -v 出现版本号时安装完成

安装webpack和webpack-cli，高版本的webpack必须安装webpack-cli
npm install webpack webpack-cli -D
npm install webpack@4.44.2 -g 全局安装webpack4
因为webpack5的版本过高，无法使用html-webpack-plugin插件
且webpack4.00.0开始，不需要引入配置文件wenpack.config.js就可以使用，当然也可以配置
webpack -v 查看版本号以证明安装成功

初始化

新建一个空文件夹 
然后npm init生成package.json
{
    "name": "webpack-second",
    "version": "1.0.0",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack --mode development",
        "build": "webpack --mode production"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "css-loader": "^5.0.1",
        "html-webpack-plugin": "^4.5.1",
        "style-loader": "^2.0.0",
        "webpack": "^4.44.2"
    },
    "dependencies": {},
    "description": ""
}

添加依赖

npm install webpack --save-dev 为项目添加依赖
安装成功后会出现node_modles文件夹，下面是一堆依赖模块

简单使用

新创建一个src目录，用于存放js文件、css文件、html文件

新建一个hello.js文件
require('./world.js');

function hello(str) {
    alert(str);
}
hello("hello world !");

新建一个world.js文件
function world() {
    return {

    };
}

在命令提示符中键入webpack hello.js hello.bundle.js
就会把hello.js作为入口文件进行打包，并且将hello.bundle.js作为出口文件

loader使用

loader是webpack中的模块和资源转换器，由于webpack本质是只处理js文件的，因此在处理js文件中的其他文件格式时就需要用到loader进行转换，它本身是一个函数，接受源文件作为参数，返回转换的结果。
Loader 可以在 require() 引用模块的时候添加，也可以在 webpack 全局配置中进行绑定，还可以通过命令行的方式使用。

安装css-loader和style-loader
npm install css-loader style-loader --save-dev

新建一个hello.js文件
require('./world.js');
// require('style-loader!css-loader!./style.css');//引入style.css模块
require('../style/style.css');//引入style.css模块，如果在这里不写loader就需要在配置文件里写

function hello(str) {
    alert(str);
}
hello("hello world !");

webpack.config.js配置文件，需要在module下引入 转换对应文件所需要的模块
module.exports = {
    mode: "development",
    entry: __dirname + "./src/script/hello.js",
    output: {
        path: __dirname + "/dist",
        filename: "js/hello.bundle.js"
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }]
    }
}
css-loader是允许webpack识别.css的文件

style-loader是将webpack识别完的css文件中的内容，在编译完运行文件的时候，将这些css用style标签包起来嵌在head内

编译打包
webpack hello.js hello.bundle.js
不在require中引入模块，而是在命令提示符中
webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader'

webpack其他命令介绍：

--progress：当前打包的进度条

--display-modules：打包的模块，依赖什么而打包也会列出来

--display-reasons：打包模块的原因，因为什么打包

输入完整命令：webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --progress --display-modules --display-reasons --watch

webpack.config.js

Webpack 在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行。默认情况下，会搜索当前目录的 webpack.config.js 文件，这个文件是一个 node.js 模块，返回一个 json 格式的配置信息对象，或者通过 --config 选项来指定配置文件。

var htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: "development",//
    entry: __dirname + "./src/script/hello.js",//入口文件路径
    output: {
        path: __dirname + "/dist",//出口文件路径
        filename: "js/hello.bundle.js"//出口文件名字（+路径）
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }]
    },
    plugins: [//引入插件
        new htmlWebpackPlugin({
            template: './src/index.html',//以index.html为模板
            filename: 'index-[fullhash].html',//出口文件的命名规则
            inject: 'head'//把编译后的js文件插入到哪个标签下，一般还有'body'
        })
    ]
}