笔记-webpack的基本使用过程

webpack的基本使用过程

一、基本使用

1. 新建两个文件src和dist，src用来存放源码（main.js，使用commonJS或者ES6模块化写的文件），dist文件夹用来存放打包之后的文件。

2. vscode中右击src，选择在“在集成终端中打开”，命令行输入：
   webpack ./src/main.js ./dist/bundle.js
   该命令作用是，告诉webpack，用webpack这个工具把src中的main.js文件以bundle.js的名字打包到dist文件夹中。webpack在打包的时候会先判断是否有依赖（导入导出），会自动处理各种模块之间的依赖，根据依赖找到需要打包的其他文件，所以只需要打包一个包含入口的文件main.js。

3. 在index.html中引入bundle.js文件即可

<script src="./dist/bundle.js"></script>

4. 如果需要修改代码，运行之前只需重新打包即可

二、webpack.config.js和package.json配置
为简化打包时的命令行，只需输入webpack+回车就可以进行打包

1. 在与index.html同级目录里添加文件webpack.config.js（不要更改名字，暂时是固定的），写上代码：

//通过require导入node里面的全局的一个path的包
const path = require('path')

module.exports = {
    entry: './src/main.js',
    output: {
    //path里面要写绝对路径，且动态获取，需要用到node语法
    //path是一个模块，里面有一个resolve函数
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
}

需要装上包含path的包
2. 在终端输入npm init + 回车

则在同一个根目录下会生成package.json

再在终端输入：npm install可解决对node的其他依赖问题
3. 现在在终端直接输入webpack + 回车，就可以进行打包了

三、 使用npm run build进行打包
开发中更常用的是使用npm run build进行打包，只需在package.json里面加上：“build”: “webpack”

使用npm run build命令另一个好处是，build里面的webpack会优先使用本地安装的webpack，而在终端（包括全局终端）直接输入webpack使用的是全局的webpack。
四、局部安装webpack
有的项目里面本地需要用到的webpack版本与全局用到的版本不一样，所以需要给本地安装一个webpack:
在终端输入：npm install webpack@3.6.0 --save-dev + 回车
安装完成后会发现在package.json中多了：

–save-dev是开发时依赖，项目打包后不需要继续使用的。

四、loader
除了JS代码处理，也需要加载CSS、图片，将ES6转换成ES5、将TypeScript转换成ES5代码、将.jsx、.vue转换成js等，只需给webpack扩展对应的loader。
贴一个webpack中文文档网站：webpack中文文档
安装css-loader，注意css-loader只负责将CSS文件进行加载，不负责解析:

1. 在终端输入：npm install --save-dev css-loader
2. 在webpack.config.js文件中加上：

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

注意这里，先不要运行npm run build去重新打包，会报错TypeError: this.getResolve is not a function，我就是弄了好久没找到原因，最后百度查到应该是版本的问题，所以在安装的时候可以加上版本：npm install css-loader@2.0.2 --save-dev，如果已经装了之前那个，就先卸载：npm uninstall css-loader，再重装：npm install css-loader@2.0.2 --save-dev。
3. 再重新打包：npm run build

安装style-border,style-border负责将样式添加到DOM中，过程相同：

1. 安装：npm install style-loader --save-dev（这里没有碰到版本问题）
2. 配置：在webpack.config.js文件中加上：

module: {
        rules: [{
            test: /\.css$/,
            // 使用多个loder时，是从右向左
            use: ['style-loader', 'css-loader']
        }]
    }

3. npm run build
   就可发现CSS被解析出来了