vhtml / webpack-multipage-static Goto Github PK
View Code? Open in Web Editor NEW基于webpack的前端工程化方案(纯静态页面)
基于webpack的前端工程化方案(纯静态页面)
//HtmlWebpackPlugin,模板生成相关的配置,每个对于一个页面的配置,有几个写几个。这块有更好的解决方案么 ?项目实战中会有很多页面,都要这样一一配置么 。
ERROR in ./src/css/page/list.less
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
at Object.module.exports.pitch (/Users/Moment/Documents/personalFiles/projectCode/webpack/webpack-MultiPage-static/node_modules/.npminstall/extract-text-webpack-plugin/1.0.1/extract-text-webpack-plugin/loader.js:21:9)
@ ./src/js/page/list.js 5:0-35
为什么我跑起来报错呢?
直接copy例子为何运行不起 @vhtml #
0 info it worked if it ends with ok
1 verbose cli [ 'C:\NODE\node.exe',
1 verbose cli 'C:\NODE\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose stack Error: missing script: start
4 verbose stack at run (C:\NODE\node_modules\npm\lib\run-script.js:142:19)
4 verbose stack at C:\NODE\node_modules\npm\lib\run-script.js:58:5
4 verbose stack at C:\NODE\node_modules\npm\node_modules\read-package-json\read-json.js:345:5
4 verbose stack at checkBinReferences_ (C:\NODE\node_modules\npm\node_modules\read-package-json\read-json.js:309:45)
4 verbose stack at final (C:\NODE\node_modules\npm\node_modules\read-package-json\read-json.js:343:3)
4 verbose stack at then (C:\NODE\node_modules\npm\node_modules\read-package-json\read-json.js:113:5)
4 verbose stack at C:\NODE\node_modules\npm\node_modules\read-package-json\read-json.js:232:12
4 verbose stack at C:\NODE\node_modules\npm\node_modules\graceful-fs\graceful-fs.js:78:16
4 verbose stack at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:380:3)
5 verbose cwd F:\PROtest\webpackmultiPage
6 error Windows_NT 6.1.7601
7 error argv "C:\NODE\node.exe" "C:\NODE\node_modules\npm\bin\npm-cli.js" "run" "start"
8 error node v4.4.3
9 error npm v2.15.1
10 error missing script: start
11 error If you need help, you may report this error at:
11 error https://github.com/npm/npm/issues
12 verbose exit [ 1, true ]
更改js 有效果 html没效果
运行 npm run build
之后的 dist 文件夹会生成一个 2.chunk.js 的文件,请问是在哪里调用这个文件的呢?好像没有文件引用到了这个 2.chunk.js。
文章写得挺赞的!不过个人有几个问题想请教一下:
1、我现在是用webpack搭建多页面的web项目,项目有n多个页面,而每次运行webpack进行打包之后,webpack都会将所有的文件都重新打包一次,这样的话很浪费资源而且不太合理...
比如,我现在有login.html,userList.html,adminList.html三个页面,每个页面都有一个对应的入口文件(login.js,userList.js,adminList.js),假设开发项目的周期是一个月,如果我今天只是开发了login相关的功能,然后明天我要接着开发userList相关的功能,那么当我运行 webpack 命令之后,之前没有修改过而且不需要修改的login相关的js/css等文件又被毫无意义地重新打包了一次,这样的话,随着项目周期越来越长,页面越来越多,而每当我运行 webpack 命令,那些之前早就开发好的功能都要被无意义地重新打包一次吗??我只是想将我当天的开发功能和作了修改的功能重新打包就好了,之前已经开发好的功能我肯定是不想再重新又打包生成一次了。而且,在生产环境中,每次打包生成的文件都加了hash,那么旧的文件改怎么处理呢?总不能每次重新打包都先将所有旧的文件都清理一遍吧?
不知道我能不能把问题给说清楚,就想请教一下,这个问题您是怎么处理的呢?
2、结合webpack该怎么使用jquery的插件呢?比如在login的功能中使用 sweetalert 插件(它有 sweetalert.css/sweetalert.min.css和sweetalert.js/sweetalert.min.js这些文件),我是用npm下载sweetalert的。现在我在login.js入口文件中import "sweetalert/dist/sweetalert.css",然后在需要使用sweetalert的组件LoginForm.js中import sweetalert from 'sweetalert';
可是webpack会报错:
ERROR in ./~/sweetalert/dist/sweetalert.css
Module parse failed: F:\MyFiles\myPro\watermirrorPro\shv\view\node_modules\sweetalert\dist\swee
talert.css Unexpected token (1:20)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:20)
我在webpack的配置文件中已经做了配置,也已经安装了相应的loader,我 import 其他的 css 文件是没有问题的,只是import "sweetalert/dist/sweetalert.css"这个的时候却报错了。。。这是怎么回事呢?麻烦大神帮忙解答一下
假设我在src/lib
下存放第三方插件,并且我的entry js文件require了某个css库, 如何让css-loader不处理这个css库?
在多个页面都require同一个css时,这个css文件被打包进各自的入口文件对应的css里面,这样相当于重复了这个css文件,请问如何解决呢?
原因是在index.html模板引入的是打包加chunk的,但是实际生成的没chunkhash
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.