*********************************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 "