使用webpack 进行ES6+sass 开发环境搭建

最新推荐文章于 2021-06-09 22:05:14 发布

chewen4764

最新推荐文章于 2021-06-09 22:05:14 发布

阅读量142

点赞数

文章标签： webpack ViewUI

原文链接：https://my.oschina.net/u/3170878/blog/855452

版权

一创建目录

/es6

---main.js

---Person.js

---zgz.scss

package.js

index.html

webpack.config.js

es6 里面存放的是 ES6 风格的代码， main.js 是入口文件， index.html 是首页， webpack.config.js 是 webpack 的配置文件。

二安装 webpack

cnpm install webpack -g

三配置

打开 webpack.config.js ，了解更多webpack.config信息

编辑如下：

var path = require('path');
module.exports = {
    entry: "./es6/main.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [{
                test: path.join(__dirname, 'es6'),
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            },
            { test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader?sourceMap' }
        ]
    },
    resolve: {
        extensions: ['.js', '.scss']
    }
}

打开 pakeage.js

编辑如下：

{
  "name": "webpack",
  "version": "1.0.1",
  "description": "test",
  "dependencies": {},
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.4.0",
    "babel-preset-es2015": "^6.22.0",
    "css-loader": "^0.26.2",
    "node-sass": "^4.5.0",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.13.2",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  },
  "scripts": {
    "test": "webpack"
  },
  "author": "zgz",
  "license": "ISC"
}

四安装loaders

安装 babel-loader

npm install babel-loader --save-dev

安装转码规则

npm install babel-preset-es2015 --save-dev

五码代码

/es6/main.js

import Person from './Person.js';

let p = new Person('张三', 20);
document.write(p.say());

/es6/Person.js

class Person{
  constructor(name, age){
    this.name = name;
    this.age = age;
  }

  say(){
    return `我是${this.name},我今年${this.age}岁了。`;
  }
}

export default Person;

/es6/zgz.scss

$font-stack: Helvetica,
sans-serif;
$primary-color:#f0f;
body {
    font: 400% $font-stack;
    color: $primary-color;
}

index.html

在这里就可以直接引用 bundle.js 了。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>

六运行

因为有 webpack.config.js 配置文件，所以只需要输入 webpack 就能运行， webpack 会自动去执行配置文件的内容：

webpack

点击index.html 直接访问即可看到效果，也可跑命令启服务

webpack-dev-server

转载于:https://my.oschina.net/u/3170878/blog/855452

chewen4764

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用webpack 进行ES6+sass 开发环境搭建

一创建目录 /es6---main.js---Person.js---zgz.scsspackage.jsindex.htmlwebpack.config.js es6 里面存放的是 ES6 风格的代码， main.js 是入口文件， index.htm...
复制链接

扫一扫