简单上手前端构建工具webpack

今天看了慕课网的webpack教程视屏，看的时候挺简单的，但是后来自己上手的时候发现了许多的问题，特在此记录下来。

首先老师那时候用的是webpack1.10版本的，到我这个时候已近发展到webpack4.0了，所以用法上的差异还是挺大的，我这里的webpack版本用的是4.8.3。下面是详细过程

1.首先建一个文件夹，然后进入文件夹

在命令行中输入

mkdir webpack_demo

cd webpack_demo

2,构建项目，安装webpack

npm init

npm install webpack --save-dev

npm install webpack -g //（全局安装，可选，方便与后面的命令行工具使用）

npm install webpack-cli -D //安装单独的命令行工具

mkdir dist //创建dist文件夹用于存放打包生成bundles

3.配置webpack.config.js文件

先创建webpack.config.js文件并输入以下内容

var path = require('path'); //引用path模块用于后面生成绝对路径
module.exports = {
    mode: 'development',  
    entry: './hellow.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'hellow.bould.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                    }
                ]
            }
        ]
    }
}

其中exports中最重要的是entry属性，output属性

entry用于要打包的入口文件

output输出打包生成的文件，其中path是输出文件的绝对路径，filename文件名

mode,模式不同的属性值有不同的代表生成的代码的形式主要有如下两种模式

development:表示开发环境，打包生成的bundles未压缩，利于开发人员阅读

production:生产环境，生成的bundles代码经过压缩，性能更好

loader：配置加载器，上面配置了两个加载器，style-loader和css-loader,用于加载css文件

4.安装style-loader和css-loader。

在命令行中输入 npm install style-loader --save-dev

npm install css-loader --save-dev

5.构建你想要打包的文件，我这里是创建了body.css,a.js,hellow.js,其中hellow.js 是入口文件

body.css

body{
	background:red;
}

a.js

function a(){
	console.log('hellowworld!!');
}
a();

hellow.js

require('./a.js');
require('./body.css');
function hellow(str){
	alert(str);
}
hellow('hellow');

6.webpack打包

在命令行输入 webpack

7.创建一个测试用的html

demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="dist/hellow.bould.js"></script>
</head>
<body>

</body>
</html>

8.在浏览器中打开这个测试文件的HTML文件

你会发现是先弹出警告框然后背景色变红，控制台显示hellowworld再看一下页面结构

css样式被自动插入到页面中了，说明webpack打包成功OK这里就结束了