安装，配置webpack.

Posted 2020-09-02 Sunnie_C

1.下载node.js

2.在需要用到webpack的项目下打开命令窗口运行npm init生成package.js

3.安装webpack，使用npm install webpack --save-dev（在本目录中安装）

4.在本项目的目录下新建一个webpack.config .js(默认访问的是这个文件，如需更改需要配置，不过我暂时还不知道怎么配的)

5.在webpack.config .js中配置

 1 var webpack = require(‘webpack‘);
 2 module.exports = {
 3     //页面入口文件配置
 4     entry:‘./js/index.jsx‘,
 5     //入口文件输出配置
 6     output:{
 7         path:__dirname,//这个要放在一个绝对路径下
 8         filename:‘dite.js‘,
 9     },
10     module:{
11         loaders:[
12         {test:/\.scss$/,loader:‘style-loader!css-loader!sass-loader‘},//这里需要下载style-loader css-loader sass-loader
13         {test :/\.jsx$/,loader:"babel-loader",query:{
14             presets:[‘react‘,‘es2015‘]
15         }}//babel可以将ES6转换为ES5   需要下载 babel-loader babel-presets-es2015 babel-presets-react
16         ]
17     },
18 //    module:{
19 //        //加载器配置
20 //        loaders:[
21 //        {test:/\.css$/,loader:‘style-loader!css-loader‘},
22 //        {test:/\.js$/,loader:‘jsx-loader?sourceMap‘},
23 //        {test:/\.scss$/,loader:‘style!css!sass!sourceMap‘},
24 //        {test:/\.(png|jpg)$/,loader:‘url-loader?limit=8192‘}//limit=8192将小于8kb的图片转换为base64
25 //        ]
26 //    },
27     resolve:{
28         extensions:[‘.js‘,‘.json‘,‘.scss‘]
29     },
30     plugins:[
31     //去除代码块内的告警语句
32         new webpack.optimize.UglifyJsPlugin({
33             compress:{
34                 warnings:false
35             }
36         }),
37         //优先考虑使用最多的模块，并为它们分配最小的ID
38         //new webpack.optimize.OccurenceOrderPlugin()
39     ]
40 }

 

6.需要新建入口引入的文件‘./js/index.jsx‘,jsx的类容(里面有一些我学习react的代码);

 1 require(‘../css/index.scss‘);
 2 import React from ‘react‘;//react的核心库
 3 import ReactDOM from ‘react-dom‘;//提供Dom的相关功能
 4 import render from ‘react‘;
 5 
 6 var b = require(‘./main‘);
 7 console.log(b.add(1,2)+"---获得b中的数据!!!");
 8 
 9 console.log("aaa"+React);
10         var i = 1;
11         var myStyle = {
12 
13           };
14           var NameStyle = {
15               fontSize:14,
16               color:‘blue‘
17           };
18           var LinkStyle = {
19               fontSize:18,
20               color:‘orange‘
21           }
22           var arr = [
23           ‘<h1>123</h1>‘,
24           ‘<h1>234</h1>‘
25           ];
26           var HelloWorld = React.createClass({
27               
28               render:function(){
29                   return(
30                       <div>
31                       <Name name = {this.props.name}/>
32                       <Link site = {this.props.site}/>
33                   </div>
34                   );
35               }
36           });
37           var Name = React.createClass({
38               render:function(){
39                   return (<h1 style={NameStyle}>{this.props.name}</h1>);
40               }
41           });
42           var Link = React.createClass({
43               render:function(){
44                   return (
45                       <div>
46                           <p>{this.props.site}</p>
47                           <a href={this.props.site}>{this.props.site}</a>
48                           </div>
49                       );
50               }
51           });
52           var LikeButton = React.createClass({
53               getInitialState:function(){
54                   return {liked:false};
55               },
56               handleClick:function(event){
57                   this.setState({liked:!this.state.liked});
58               },
59               render:function(){
60                   var text =this.state.liked?‘喜欢‘:‘不喜欢‘;
61                   return(
62                       <p onClick={this.handleClick}>
63                           你{text}我,点我切换状态;
64                       </p>
65                   );
66               }
67           })
68     ReactDOM.render(
69         <h1 style = {myStyle}>
70         {/*first info*/}
71           Hello,world!
72           {1+2}{i==1?‘true‘:‘false‘}
73           {arr}
74           <HelloWorld name = ‘yeam‘ site="http://www.runoob.com"/>
75           <LikeButton/>
76         </h1>,
77         document.getElementById(‘setInfo‘)
78     )

 

 7.package中的相应信息

 1 {
 2   "name": "hello",
 3   "version": "1.0.0",
 4   "main": "index.js",
 5   "scripts": {
 6     "test": "echo \"Error: no test specified\" && exit 1",
 7     "start": "webpack-dev-server --port 3000"
 8   },
 9   "author": "",
10   "license": "ISC",
11   "devDependencies": {
12     "babel-loader": "^6.3.2",
13     "babel-preset-es2015": "^6.22.0",
14     "babel-preset-react": "^6.23.0",
15     "browser-sync": "^2.18.7",
16     "css-loader": "^0.26.2",
17     "gulp": "^3.9.1",
18     "gulp-autoprefixer": "^3.1.1",
19     "gulp-clean-css": "^3.0.2",
20     "gulp-concat": "^2.6.1",
21     "gulp-minify-css": "^1.2.4",
22     "gulp-sass": "^3.1.0",
23     "gulp-uglify": "^2.0.1",
24     "react": "^15.4.2",
25     "react-dom": "^15.4.2",
26     "runoob-react-test": "file:React",
27     "sass-loader": "^6.0.2",
28     "style-loader": "^0.13.2",
29     "webpack": "^2.2.1",
30     "webpack-dev-server": "^2.4.1"
31   },
32   "dependencies": {
33     "react": "^15.4.2",
34     "react-dom": "^15.4.2"
35   },
36   "description": ""
37 }