webpack 开发的一点思路--未完待续

最新推荐文章于 2021-01-21 15:37:10 发布

pioneer-linzi

最新推荐文章于 2021-01-21 15:37:10 发布

阅读量339

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/pioneerlinzi/article/details/72312416

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

npm init

用npm 去初始化一个项目，并把配置信息保存在 package.json文件中

npm init

安装Webpack

    npm install --save-dev webpack

创建文件

回到之前的空文件夹，并在里面创建两个文件夹，app public ，app 文件夹用来存放原始数据，和我们将写的javascript 模块，public 文件夹来存放之后供浏览器读取的文件（包括使用webpack 打包生成的js文件以及一个index.html文件）。接下来我们再创建两个个文件
index.html public文件夹中

main.js 放在app文件夹中入口文件

简单的webpack配置

var webpack = require('webpack');
var path= require('path');

module.exports = {
    //页面入口文件配置
    entry: {
        index : './app/index.js'
    },
    //入口文件输出配置
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: '[name].js'
    },
    devServer:{
        historyApiFallback:true,
        inline:true
    },
    module: {
        //加载器配置
        loaders: [
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /\.js$/, loader: 'jsx-loader?harmony' },
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    },
};

安装 webpack-dev-server

    npm install webpack-dev-server --save-dev

package.json script

"start": "webpack-dev-server --content-base dist/ --inline

npm install eslint –save-dev

npm install eslint --save-dev
npm install eslint-config-airbnb --save-dev

安装 eslint 来做为开发时候的一个代码的规范
说起来eslint ，那就提一下 airbnb javascript ,　　Airbnb 是一家位于美国旧金山的公司，本文是其内部的 JavaScript编码规范，写得比较全面，在 Github 上有 16,686 + Star，3,080 + fork.这里我放一个中文版的，方便学习。
https://github.com/yuche/javascript
http://eslint.cn

创建.eslintrc.json的配置文件

{
    "extends": "airbnb/base",
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
        "node": true
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "sourceType": "module"
    },
    "rules": {
        // "no-const-assign": "warn",
        // "no-this-before-super": "warn",
        // "no-undef": "warn",
        // "no-unreachable": "warn",
        // "no-unused-vars": "warn",
        // "constructor-super": "warn",
        // "valid-typeof": "warn"
    }
}