script start import 服务 修改 CSS all sets 打包
1. 全局安装webpack
cnpm install --save-dev webpack
2. 初始化
cnpm init
cnpm install --save-dev webpack
创建项目目录( dist为生成目录 )
3. 配置文件 webpack.config.js
- module.exports = {
- entry: __dirname + "/src/main.js",
- output: {
- path: __dirname + "/dist",
- filename: "bundle.js"
- }
- }
创建main.js文件
index.html 文件引入
- <script src="dist/bundle.js"></script>
执行命令 webpack 即可生成list/bundle.js
4. babel配置
cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
webpack.config.js添加代码:
- module: {
- rules: [{
- test: /(\.jsx|\.js)$/,
- use: {
- loader: "babel-loader",
- options: {
- presets: ["es2015", "react"]
- }
- },
- exclude: /node-modules/
- },
- ]
- },
测试:
src/js/a.js 代码:
- var obj={
- a: 3,
- b: 2,
- add() {
- return this.a+this.b;
- }
- }
- export default obj;
main.js 引用:
- import obj from "./js/a";
- console.log(obj.add());
执行 webpack ,启动浏览器查看
5. 构建服务器
配置:
- devServer: {
- historyApiFallback: true, //不跳转
- inline: true //实时刷新
- }
package.json中的 scripts 添加:
- "start": "webpack",
- "server": "webpack-dev-server --open"
- 执行 npm start 生成bundle.js
- 执行 npm run server 启动服务器
修改index.html 文件引入路径
- <!-- bundle.js在虚拟内存中,可以实时刷新 -->
- <!-- dist/bundle.js是打包后才刷新 -->
- <script src="bundle.js">
- </script>
6. css
cnpm install --save-dev style-loader css-loader
配置:
- {
- test: /\.css$/,
- use: [
- {
- loader: "style-loader"
- },
- {
- loader: "css-loader"
- }
- ]
- },
src/css/style.css 代码:
- html,body{
- width: 100%;
- height: 100%;
- padding: 0;
- margin: 0;
- background-color: #ddd;
- }
main.js 引入:
- import "./css/style.css";
7. sass
cnpm install --save-dev sass-loader
cnpm install node-sass
配置:
- {
- test: /\.scss$/,
- loader: ‘style-loader!css-loader!sass-loader‘
- },
src/scss/base.scss 代码:
- body {
- div {
- width: 200px;
- height: 200px;
- border: 1px solid#f69;
- margin: 20px auto;
- background: url("../images/1.png"); & :hover {
- box - shadow: 0px 0px 5px 6px#aaa;
- }
- }
- }
main.js 引入:
- import "./scss/base.scss";
8. image
cnpm install --save-dev url-loader
cnpm install --save-dev html-withimg-loader
配置:
- {
- test: /(\.png|\.jpg)$/,
- loader: "url-loader?limit=8192"
- },
a: js 中的图片引入
- var imgUrl = require("./images/1.png");
b: html 中的图片
- <img src="./src/images/1.png" alt="">
c: css中的图片
- background: url("../images/1.png");
webpack学习笔记
script start import 服务 修改 css all sets 打包
原文:http://www.cnblogs.com/hsianglee/p/7781799.html
来源: http://www.bubuko.com/infodetail-2379751.html