webpack+react(1)

前言

使用包管理器npm或cnpm或yarn

---

创建一个项目

1. 初始化项目，npm init

会出现一些让你写的内容，直接回车就好，然后在你的项目文件下会生成一个package.json文件，这个放置一些依赖文件。

package.json

2. 创建src和dist目录，在src下创建 index.html(将dist / main.js导入)和index.js，在项目根目录下创建webpack.config.js的webpack配置文件
   webpack.config.js

module.exports = {
    mode: 'development', // development(开发环境) production(产品环境，自动生成压缩文件)
};

webpack制定入口文件是src / index.js，出口文件是dist / main.js(webpack自动生成)

项目目录

3. 下载webpack
npm install webpack -D
4. 下载webpack-cli

由于自webpack的4.x版本之后，就将命令行和打包分开，打包由webpack-cli来提供

npm install webpack-cli -D
也可以将第三步第四步一起运行npm install webpack webpack-cli -D
在这里执行webpack对项目进行打包

项目打包成功

---

托管main.js

5. 对项目进行热更新
   npm install webpack-dev-server -D
   在package.json加入"dev": "webpack-dev-server"
   package.json

"dev": "webpack-dev-server --open --port 3001 --hot --host 121.0.0.1 "

--open是直接打开浏览器，--open firefox打开火狐
--port 8080定义端口号
--hot定义热更新
--host定义域名(使用本地Ip，或者不指定)

使用npm run dev

terminal

发现命令并未退出，一直在执行...等待文件的变化

webpack-dev-server打包之后的文件是main.js保存在了/（根目录）下，但是是隐藏的（项目根目录中看不到），放在了内存上，为了快速访问，将index.js修改为

index.js

---

托管首页index.html

6. npm install html-webpack-plugin -D
   改变webpack.config.js

//引入
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');//导入在内存中自动生成index页面的插件

//创建一个插件的实例对象
const htmlPlugin = new HtmlWebPackPlugin({
    template: path.join(__dirname,'./src/index.html'),    //源文件
    filename: 'index.html'                                //生成内存中首页的文件名称
});

module.exports = {
    mode: 'development', // development production
    plugins:[
        htmlPlugin
    ]
};

路径path.join(__dirname,'') 指代当前文件所处目录层级

注释 <script src = /main.js></script>