cnpm install css-loader --save-dev //css-loader 是将css打包进js
cnpm install style-loader --save-dev //style-loader 将css通过require方式引入进来
cnpm install sass-loader node-sass --save-dev //同时安装sass 和sass-loader
cnpm install extract-text-webpack-plugin --save-dev //把css从js中提取出来
目录结构(publi为src编译生成的文件)
html
6r456
index.scss
$col:pink;@import "./demo"; //导入cssbody{ font-size: 900%; #app{color:$col;}} demo.css
#demo{ color:blue;} index.js
//loader-cssrequire("../css/index.scss"); $('#app').html("1334");$("#app").click(function(event){ alert(123) });
webpack.config.js
var webpack = require("webpack");var webpckDevServer = require("webpack-dev-server");var ExtractTextPlugin = require('extract-text-webpack-plugin'); //抽离css插件var extractCss = new ExtractTextPlugin("css/index.css"); //实例化，并并填写输出的一个路径[]中表示输出默认名称,这个目录相对于提出的那个目录module.exports = { entry:{ index:__dirname + "/src/js/index.js",//入口文件 webpack-dev-server 实时刷新监控的目录 ab:[__dirname +"/src/js/a.js",__dirname +"/src/js/b.js"], //输出后是一个总的ab，他们两个也会分别的被输出,引用顺序先b.js然后其他两个不分顺序 jq:['jquery'] //这是个多入口，可以写多个依赖的库，例如jq:['jquery','react'],这里引用了就不用在index.js里面用require或者用es6 import引用 }, output: { path: __dirname + "/public/", filename: "js/[name].js", publicPath: '/assets/' //打开webpack-dev-server 服务器工具时可以再index里面引用此地址，打开速度会快一点,另外他不是直接在内存中存放而是先在webpack的虚拟内存中暂存,所以在webpack未编译之前能够运行，如果直接写实体目录则不经过webpack打包编译，浏览器是识别不了的，所以先放在这个虚拟目录里，因为是虚拟目录，所以你看不到他的编译文件 }, devServer: { contentBase: "./", //根目录 host: '192.168.199.171', //ip设置 要相对的进行改变 port: "80", //端口 colors: true, open: true //自动打开浏览器 }, module: { loaders: [{ test: /\.css$/, //匹配.css文件 loader: ExtractTextPlugin.extract("style-loader", "css-loader") }, { test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css!sass") }] }, plugins: [ extractCss, new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } //自动压缩js,css }), new webpack.optimize.CommonsChunkPlugin({ names:['a','b'] // 上面入口定义的节点组 ,不这样上面的ab会集合在一个ab.js中，而不会从里面提取出来 })] }
package.json
{ "name": "webp2", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "www": "cnpm run demo && cnpm run devServer", "demo": "webpack --watch --progress -d -p --color", "demo2": "webpack --config webpack.config123.js --watch --progress -d -p --color", "start": "webpack --watch --progress -d -p --color", "devServer": "webpack-dev-server --inline --hot" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "css-loader": "^0.26.1", "extract-text-webpack-plugin": "^1.0.1", "jquery": "^3.1.1", "node-sass": "^4.0.0", "sass-loader": "^4.1.0", "style-loader": "^0.13.1", "uglify-js": "^2.7.5", "webpack": "^1.14.0", "webpack-dev-server": "^1.16.2" }}