index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Admin</title> </head> <body> <h1>Admin Page</h1> <p id="content"></p> <script src="/dist/admin.bundle.js"></script> </body> </html>
index.js
import 'style!css!./admin.css';//加载顺序，从右往左 import './content.scss'; import 'jquery'; document.getElementById('content').innerText = ' This is Admin Page. Welcome!';
content.scss
body {
p {
color: gray;
}
}
admin.css
body { background: url(../images/background.png); color: white; } h1:before { content: url(../icons/admin.png); }
webpack.config.js
var path = require('path'); var config = { entry: { admin: './admin/index.js', consumer: './consumer/index.js' }, output: { path: path.join(__dirname, 'dist'), publicPath: '/dist/', filename: '[name].bundle.js' }, module: { noParse: [/jquery/], //webpack对于每一个文件都会去遍历里面的import、require,然后找到对应的文件，noParse是不去遍历jquery里面的require、import， loaders: [{ test: //images//, //images文件夹路径 loader: 'file' //file-loader加载 }, { test: //icons//, //icons文件夹路径 loader: 'url' //url-loader加载 }, { test: /.js$/, exclude: /node_modules/, //不做预处理 loader: 'babel' //url-loader,可以使用es6的语法 }, { test: /.scss$/, loader: 'style!css!sass' //sass }] } }; module.exports = config;
package.json
{ "name": "demo3", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1", "start": "webpack-dev-server --progress --colors --hot --inline -d", "build": "webpack --progress --colors -p" }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "5.8.25", "babel-loader": "5.3.2", "css-loader": "0.18.0", "file-loader": "0.8.4", "node-argv": "0.0.7", "sass-loader": "2.0.1", "style-loader": "0.12.4", "url-loader": "0.5.6", "webpack": "1.12.1", "webpack-dev-server": "1.10.1" }, "dependencies": { "jquery": "2.1.4" } }