Webpack 环境配置

前言

刚开始学习San，对webpack不熟悉，配置San的环境过程有点艰难，难得出来，还是记录下！

过程

首先，在新建项目文件夹下打开命令行，首先安装webpack（注意：文件名要符合命名规则）

npm init -y (若对package.json中的内容进行设置，也可以使用npm init进行初始化)

npm install --save-dev webpack
npm instal  --save-dev webpack-cli

执行完上述命令后会，在项目文件夹中新建两个文件夹./src和./dist，分别用于存放index.js文件和index.html文件，此时的目录为

--dist
---index.html
--src
---index.js
--node_modules
--package-lock.json
--package.json

webpack需要有入口文件，为'./src/index.js'文件，在项目文件中新建该文件夹，有了入口文件，需要将其打包输出

npx webpack ./src/index.js

将src中的index.js文件打包输出，此时dist中会增加一个输出文件main.js，然后需要配置webpack.config.js文件内容，该内容可以根据自己需求进行配置，基本的配置如下：

const path = require("path");

module.exports = {
    entry: "./src/index.js",  //输入文件名
    output: {
        filename: "bundle.js",   //给出输出文件名
        path: path.resolve(__dirname,"dist") //给出输出文件的路径
}
}

配置完成后进行打包

npx webpack //(在node为8.0以上的版本使用)

安装完成后在./dist的文件中就生成了一个名为bundle.js的文件，若需要满足需求的具体配置，还进一步配置。

例如，在项目中，由于js和样式会频繁修改，可以使用自动刷新功能帮助实现，安装指令

npm install webpack-dev-server --save-dev

安装后修改package.json中script的内容

“script”: {
    "start": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
}

webpack --mode development

可以选择以上任意一种方式进行打包，具体的差别参考https://webpack.js.org/concepts/mode/

此外，webpack还支持通过loader引入任何类型的文件

npm install --save-dev style-loader css-loader -g

 若需要使用babel-loader转换js代码，还需要安装babel-loader

npm install --save-dev babel-loader babel-core

若需要配置安装插件

npm install html-webpack-plugin --save-dev

然后在webpack.config.js中定义所需要的插件，再去webpack.config.js中增加插件

const HtmlWebpackPlugin = require("html-webpack-plugin");
...... // 这部分是原来的
plugins: [
    new HtmlWebpackPlugin({
            template: './src/index.html'
        }) 
]

将dist中的index.html复制到src中去，并删除原来dist中的所有内容，然后进行打包

npm run build

这样在dist中会重新生成index.html文件和bundle.js文件。