vikingmute / webpack-for-fools Goto Github PK
View Code? Open in Web Editor NEWwebpack tutorial for fools
webpack tutorial for fools
ReactDOM.render(<app />, app);
should be
ReactDOM.render(<App />, app);
@vikingmute webpack关于多入口文件和webpack-dev-server热加载的整合找了很多地方,并没有相关是示例,请问有相关的demo吗?
这样纸就可以:
{
test: /.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
}
无须这样:
{ test:/\.jsx?$/, loaders:['react-hot', 'babel?presets[]=es2015&presets[]=react'], include:APP_PATH }
星期一想说的,一时找不到之前的配置了。
刚刚看了一眼,发现版主已经更新了。
我是按照第一篇教程一步一步进行的,安装了全局的webpack,和全局的webpack-dev-server,然后在package.json里添加了scripts:start: webpack-dev-server --hot --line,运行npm start,就是报错,页面也出不来。
ERROR in multi main
Module not found: Error: Cannot resolve module 'webpack/hot/dev-server' in D:\My
Web\webpack
@ multi main
webpack: bundle is now VALID.
一篇链接404,一篇链接重复
https://github.com/vikingmute/webpack-for-fools/blob/master/entries/chapter-2.md 这里配置了查看sourcemap的选项,可是样式文件不是被打入页面了么,怎么查看.map文件啊
还需要安装一个babel-core
模块,不然会报如下的错误:
ERROR in ./app/index.js
Module build failed: Error: Cannot find module 'babel-core'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/Users/uesrHome/demo/webpack/node_modules/babel-loader/lib/index.js:4:13)
博客中忘记写安装babel-core
模块了。
perLoaders => preLoaders
具体位置在Webpack开发技巧->第一种方法 使用webpack.ProvidePlugin
小节,
在webpack.config.js中配置到webpack.ProvidePlugin
时应在头部添加以下一行:
var webpack = require('webpack');
照着例子做,到sass那里总是报错,原来要安装sass-loader 和 node-sass,才能解析.scss文件
npm install sass-loader node-sass --save-dev
我用CommonsChunkPlugin合成vue,vue-resource,成功生成了vendor并且导入到了html里,但是用vue还是报vue不存在。
entry: { index: './src/js/page/index.js', vendor: ['./src/js/lib/vue.js','./src/js/lib/vue-resource.js'] },
plugins: [ // new webpack.ProvidePlugin({ //加载jq // $: 'jquery' // }), new ExtractTextPlugin('css/[name].css'), //单独使用link标签加载css并设置路径,相对于output配置中的publickPath new webpack.optimize.CommonsChunkPlugin('vendor', 'js/vendor.bundle.js'), //HtmlWebpackPlugin,模板生成相关的配置,每个对于一个页面的配置,有几个写几个 new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML filename: './views/index.html', //生成的html存放路径,相对于path template: './src/views/index.html', //html模板路径 inject: 'body', //js插入的位置,true/'head'/'body'/false hash: true, //为静态资源生成hash值 chunks: ['index'],//需要引入的chunk,不配置就会引入所有页面的资源 minify: { //压缩HTML文件 removeComments: true, //移除HTML中的注释 collapseWhitespace: false //删除空白符与换行符 } }) ],
new HtmlwebpackPlugin({
title: 'Hello Mobile app',
template: path.resolve(TEM_PATH, 'mobile.html'),
filename: 'mobile.html',
chunks: ['app', 'vendors'],
inject: 'body'
})
这里的chunks我感觉应该是['mobeil', 'vendors']才对啊。
0 info it worked if it ends with ok
1 verbose cli [ 'E:\NODE\node.exe',
1 verbose cli 'E:\NODE\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info predev [email protected]
6 info dev [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec dev script
9 verbose stack Error: [email protected] dev: webpack-dev-server
9 verbose stack Exit status 1
9 verbose stack at EventEmitter. (E:\NODE\node_modules\npm\lib\utils\lifecycle.js:217:16)
9 verbose stack at emitTwo (events.js:87:13)
9 verbose stack at EventEmitter.emit (events.js:172:7)
9 verbose stack at ChildProcess. (E:\NODE\node_modules\npm\lib\utils\spawn.js:24:14)
9 verbose stack at emitTwo (events.js:87:13)
9 verbose stack at ChildProcess.emit (events.js:172:7)
9 verbose stack at maybeClose (internal/child_process.js:827:16)
9 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
10 verbose pkgid [email protected]
11 verbose cwd D:\Program Files (x86)\XAMPP\htdocs\webpack\webpack-react-kit
12 error Windows_NT 10.0.10586
13 error argv "E:\NODE\node.exe" "E:\NODE\node_modules\npm\bin\npm-cli.js" "run" "dev"
14 error node v4.4.3
15 error npm v2.15.1
16 error code ELIFECYCLE
17 error [email protected] dev: webpack-dev-server
17 error Exit status 1
18 error Failed at the [email protected] dev script 'webpack-dev-server '.
18 error This is most likely a problem with the webpack-react-kit package,
18 error not with npm itself.
18 error Tell the author that this fails on your system:
18 error webpack-dev-server
18 error You can get information on how to open an issue for this project with:
18 error npm bugs webpack-react-kit
18 error Or if that isn't available, you can get their info via:
18 error
18 error npm owner ls webpack-react-kit
18 error There is likely additional logging output above.
19 verbose exit [ 1, true ]
对于新手来说真是痛苦,也不知道哪里有问题
用了npm install babel-preset-react-hmre --save-dev 后,局部热更新确实可以了,
但是每修改一次,render的内容就好重复一次。。。
假如修改了3次,界面大概是这样子的:
ERROR in bundle.js from UglifyJs
SyntaxError: Unexpected token: string (./main.scss) [./app/index.js:1,0]
貌似不能识别scss?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.