loader的使用,plugin的使用,package.json的引入,webpack-dev-server加broswer插件的组合使用
上一单知道,我们加载css是需要编译的,那何不如,直接用less呢?!!
我们建4个文件 一个js,一个html,一个config,一个less
安装less 和webpack 的loader npm install less npm install style-loader css-loader less-loader 配置webpack.config.js module.exports = { entry: './entry.js', output: { filename: 'bundle.js' }, module: { loaders: [{ test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },] } }; a.less @color: yellow; h1 { color: @color; } entry.js require('./a.less'); document.write('<h1>helloworld.<h1>') 编译: webpack运行: 直接点开index.html,
说明: 运行机制都一样,生成一个bundle.js,然后访问index.html 有很多的loader ,请参考 官网的loader列表 http://webpack.github.io/docs/list-of-loaders.html
DefinePlugin 这个插件,定义了一个全局的静态 变量 _mypath,我们要在js里面使用它.
webpack.config.js var webpack = require('webpack'); var envPlugin = new webpack.DefinePlugin({ _mypath: 14 }); module.exports = { entry: './entry.js', output: { filename: 'bundle.js' }, plugins: [envPlugin] }; index.html <html> <head> <meta charset="utf-8"> </head> <body> <script src="bundle.js"></script> </body> </html> entry.js document.write('It works.' + _mypath)直接编译后访问index.html, 就能看到效果了
我们copy那个less的代码,直接在目录下 npm init,就会发现多了一个package.json 然后我们要安装各模块
npm install less style-loader css-loader less-loader --save加上–save,即把依赖的内容加到package.json,查看下:
{ "name": "c7", "version": "1.0.0", "description": "", "main": "entry.js", "author": "", "license": "ISC", "dependencies": { "css-loader": "^0.26.4", "less": "^2.7.2", "less-loader": "^3.0.0", "style-loader": "^0.13.2" } }以后copy工程,不用把node_modules 文件夹带着了,用这个package.json 就行,要用的时候,npm install,即可把dependencies的内容给下下来.这个和pom.xml倒是很像呢 。
这里说三点, 一是 webpack-dev-server和 和webpack 命令类似 但这里会启动一个服务启动默认8080端口, 二是webpack-browser-plugin 可以弹出浏览器 三是 package.json 的scripts命令.
在上面的工程里改
webpack.config.js const WebpackBrowserPlugin = require('webpack-browser-plugin'); module.exports = { entry: './entry.js', output: { filename: 'bundle.js' }, module: { loaders: [{ test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, ] }, plugins: [new WebpackBrowserPlugin()] }; package.json { "name": "c7", "version": "1.0.0", "description": "", "main": "entry.js", "scripts": { "go": "webpack-dev-server" }, "author": "", "license": "ISC", "dependencies": { "css-loader": "^0.26.4", "less": "^2.7.2", "less-loader": "^3.0.0", "style-loader": "^0.13.2", "webpack-browser-plugin": "^1.0.20" } } 安装插件 npm install webpack-browser-plugin --save 然后在命令上直接运行 npm run go结果就是弹出浏览器,localhost:8080