基本的概率：
-------------------------------------------------------------------------------------------------------
node.js:一个javascript运行环境npm:node.js包管理工具cnpm:中国版npm，为了解决npm受网络影响出现异常。webpack：前端资源加载打包工具
---------------------------------------------------------------------------------------------------------
第一步安装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包
npm install webpack --save-dev //安装webpack，安装了cnpm可以用cnpm，这时候会在文件夹下为你新建一个node_modules文件夹，里面包含了许多依赖包
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 自动帮你修复
s
webpack 入门
原文地址：https://www.cnblogs.com/sjyzz/p/8193311.html