webpack+react(1)

版权声明：原创转载请注明出处，谢谢合作！ https://blog.csdn.net/zhongqw_00/article/details/81255184

前言

使用包管理器npm或cnpm或yarn

---

创建一个项目

1. 初始化项目，npm init
   

   会出现一些让你写的内容，直接回车就好，然后在你的项目文件下会生成一个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

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

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

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

使用npm run dev

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

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

---

托管首页index.html

1. 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>