webpack安装跑坑

xiaoxiao2021-02-28  10

*********************************webpack一整套跑下来*************************************

https://www.jianshu.com/p/42e11515c10f             简书关于webpack的详细教程

1:新建文件夹,安装webpack,已经全局安装cli和dev-server

2:继续建文件夹:src    dist    以及webpack.config.js  src里面放indexhtml  css js image文件夹,以及webpackjs

3:webpack.config.js内容:

var path = require('path')var webpack = require('webpack')module.exports = {  // bundle入口  entry: ['./src/webpack'],  // bundle输出  output: {    path: path.join(__dirname, 'dist'),    filename: 'bundle.js' //可重命名  }

}

重新打包的时候必须删除bundlejs里面的内容,不然就会有重复的内容

4:直接运行webpack命令,已经可以看到输出了,虽然有警告。

*******************************************************************************************

1:git clone 项目到本地2:init  ,把命令写入json文件3:安装webpack cnpm install webpack webpack-dev-server webpack-cli --save-dev4:安装react依赖 cnpm install react react-dom --save-dev5:新建文件夹以及index文件6:新建configjs文件--引入最基本的配置;然后配置devserver入口文件夹--必须有jsxloader才能打包react7:安装babel解析jsx cnpm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react    然后在config中对loader进行配置; ++++++++++++到这里可以正常打包和打开页面了+++++++++++++++++++++ 注意:入口页面的render也需要引入,render里面只能放组件标签,--可是前面为什么会出错呢?*************************************webpack分步走************************************1:webpack的初始配置;cnpm isntall webpack webpack-dev-server webpack-cli --save-dev然后配置config,写入入口文件;然后直接配置json,加入启动命令即可;server已经可以正常运行2:加入loader,和插件;jsxloader css/lessloader/图片loader/jsxloader:cnpm insatll --save-dev babel-core babel-loader babel-preset-env babel-preset-react babel-preset-es2015css/lessloader: cnpm insatll style-loader css-loader --save-dev图片loader:cnpm insatll --save-dev url-loader html-withimg-loader插件1:引入模板文件-在config引入和实例化cnpm install html-webpack-plugin --save-dev插件2:热更新:直接实例化 webpack.HotModuleReplacementPlugin3:引入react以及各种模块cnpm install react react-dom react-router-dom redux react-redux thunk --save-dev

---写入indexhtml和js,以及在config中配置devserver目录,即可打开端口和页面

4:devtool: 'source-map',    mode: "development",    引入这两个设置之后,速度才真正飞起来,打包时间才2s不到

集中命令:webpack+解码器+插件+react+express+axios+socket cnpm --save-dev isntall webpack webpack-dev-server webpack-cli <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="root"></div> </body> <script type="text/javascript" src="bundle.js"></script> </html> import React from 'react' import ReactDom from 'react-dom' import {render} from 'react-dom'; function Test(){ return <h2>test</h2> }

render(<Test/>, document.getElementById('root'));

module.exports = {     entry:  __dirname + "/app/index.js",//已多次提及的唯一入口文件  '"     output: {         path: __dirname + "/build",//打包后的文件存放的地方         filename: "bundle.js"//打包后输出文件的文件名     },     devServer: {         contentBase: "./build",//本地服务器所加载的页面所在的目录         historyApiFallback: true,//不跳转         inline: true//实时刷新     },     module: {         rules: [             {                 test: /(\.jsx|\.js)$/,                 use: {                     loader: "babel-loader",                     options: {                         presets: [                             "env", "react"                         ]                     }                 },                 exclude: /node_modules/             }         ]     } }     "start": "webpack",     "server": "webpack-dev-server "

转载请注明原文地址: https://www.6miu.com/read-2250025.html

最新回复(0)