react项目实践——(1)webpack项目创建

 

1. 新建文件夹,命名为项目名称——myapp,并打开myapp文件夹。

复制代码
mkdir webpack-demo && cd webpack-demo
复制代码

2. 在./myapp中打开命令行窗口,输入 npm init ,初始化npm

可一直按回车,使用默认配置。

此时,./myapp中生成package.json文件。

3. 本地安装webpack和 webpack-cli(此工具用于在命令行中运行 webpack)【1】

复制代码
npm install webpack webpack-cli --save-dev
复制代码

此时,package.json内容为:

./myapp为:

 

 4. 创建项目目录结构、文件和内容

(1)创建src文件夹,用于存放开发源码

(2)创建dist文件夹,用于存放发布的代码,以及webpack打包后的文件

(3)./myapp/src新建index.js,内容为:

复制代码
function component() {   var element = document.createElement('div');    // Lodash(目前通过一个 script 脚本引入)对于执行这一行是必需的  element.innerHTML = _.join(['Hello', 'webpack'], ' ');    return element; }  document.body.appendChild(component());
复制代码

(4)./myapp/dist新建index.html,内容为:

复制代码
<!doctype html><html>  <head>    <title>react项目实践</title>    <script src="https://unpkg.com/lodash@4.16.6"></script>  </head>  <body>    <script src="./src/index.js"></script>  </body></html>
复制代码

(5)调整 package.json 文件,以便确保我们安装包是私有的(private),并且移除 main 入口。这可以防止意外发布你的代码。

关键字:
50000+
5万行代码练就真实本领
17年
创办于2008年老牌培训机构
1000+
合作企业
98%
就业率

联系我们

电话咨询

0532-85025005

扫码添加微信