webpack 入门

基本的概念：

-------------------------------------------------------------------------------------------------------

node.js: javascript运行环境

npm:node.js包管理工具，下载node.js自带有

cnpm:中国版npm，为了解决npm受网络影响出现异常。

webpack：前端资源加载打包工具，作用就是找到javascript模块以及其它浏览器不能识别的语言(less..)将其转换和打包成能识别或合适的格式

---------------------------------------------------------------------------------------------------------

第一步安装node.js ，直接官网下载傻瓜式安装。node.js自带有npm，如果你想下载插件快一点可以安装cnpm

打开cmd，输入： npm install -g cnpm --registry=http://registry.npm.taobao.org  

接下来构建一个前端开发环境:

新建一个文件夹,在cmd中cd到该文件下。

输入：

npm init -y  //帮你新建一个package.json文件，管理本地安装的npm包，也可以将常用命令放入package.json中scripts下

npm install webpack --save-dev //安装webpack

npm install html-webpack-plugin  --save-dev //会自动帮你生成html文件，并且引用相关js、css文件。 

  npm install webpack-dev-server --save-dev  //让浏览器自动刷新

　npm install css-loader style-loader --save-dev  //加载css需要的loader

在文件夹下面新建一个webpack.config.js文件，该文件为webpack的配置文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const PATHS = {
  app: path.join(__dirname, 'app'),
  build: path.join(__dirname, 'build'),
};


module.exports = {
  devServer: {
    host: process.env.HOST,
    port: 1432,
  },
  entry: {
    app: PATHS.app,
  },
  output: {
    path: PATHS.build,
    filename: '[name].js',
  },
  module:{
    // loaders:[{
    //   test:/.css$/,
    //   loader:'style-loader!css-loader'
    // }] 这样写也行
    rules:[
      // {test: /.js$/, use: ['babel-loader']},
      {test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 并把css添加到html的style标签里*/
      {test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析图片*/
      {test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成浏览器可以识别的css语言*/
    ]
  },
  // resolve:{
  //   extensions:['','.js','.json','.css','.less']
  // },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack demo',
    }),
  ],
};

在package下面的scripts节点中添加

"start":"webpack-dev-server --env development"

在文件夹下新建一个app文件夹，文件夹下面新建index.js,component.js,cons.css。做个测试

index.js如下：

import component from './component';
import './cons.css';
document.body.appendChild(component());

component.js如下：

export default (text='hellow world') =>{
  const element = document.createElement('div');
  element.innerHTML = text;
  return element;
};
cons.css如下:
body{ background-color:red; }

npm run start

打开浏览器：localhost:8080.查看。

如果需要修改端口号，在配置文件下的devServer下修改，host：地址，post：端口号。

devServer: {
host: process.env.HOST,
port: 1432,
},

代码规范检查 && 自动修复：

安装插件：

npm install eslint --save-dev

配置文件下的scripts节点下添加：

"lintjs": "eslint app/ webpack.*.js --cache"

 

修建一个.eslintrc.js文件，详细介绍访问eslint官网

module.exports = {
    env:{
        browser:true,
        commonjs:true,
        es6:true,
        node:true,
    },
    extends:'eslint:recommended',
    parserOptions:{
        sourceType:'module',
    },
    rules:{
        'comma-dangle':['error','always-multiline'],
        indent:['error',2],
        'linebreak-style':0,
        quotes:['error','single'],
        semi:['error','always'],
        'no-unused-vars':['warn'],
        'no-console':0,
    },
};

使用命令：

npm run lintjs可以查看所有js文件中不规范的地方。

npm run lintjs -- --fix 自动帮你修复