标签：运行 出现 const es6 import ini 自动生成 模板 charset
建立文件夹test，用vscode打开文件夹
npm init -y //生成 一个package.json
新建dist，src，config目录,在src目录下添加 index.html index.js ,其代码为如下，为实现隔行变色效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./index.js"></script> </head> <body> <div> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </body> </html>
import $ from ‘jquery‘ //es6 模块化语法，有兼容问题。需要用webpack转换，在需要的地方导入转化后的代码 $(function(){ $(‘li:odd‘).css(‘backgroundColor‘,‘pink‘) $(‘li:even‘).css(‘backgroundColor‘,‘red‘) })
上面js，需要安装jquery
npm install jquery --save
安装与配置webpack部分
npm install webpack webpack-cli webpack-dev-server -D
创建webpack.config.js 文件夹，初始化webpack打包模式
module.exports={ mode:‘development‘ //production }
package.json script节点增加
"dev":"webpack"
修改index.html 的js 引入部分
<script src="./index.js"></script> 改为 <script src="../dist/main.js"></script>
npm run dev 运行正常，浏览出现隔行变色
自动打包配置为
入口文件：src/index.js
输出文件：dist/main.js
修改默认打包配置
const path = require(‘path‘) //处理路径信息 module.exports ={ mode:‘development‘, // development || production entry:path.join(__dirname, ‘./src/index.js‘), //webpack 打包入口文件 output:{ path: path.join(__dirname,‘./dist‘), //打包完成放置位置 filename:‘bundle.js‘ //打包后的文件名 } }
修改html引入文件为
<script src="../dist/bundle.js"></script>
npm run dev 运行结果正常
配置自动打包
已经安装webpack-dev-server 自动打包npm
修改package.json
"dev": "webpack-dev-server"
备注：配置自动打包的参数
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
自动打包的bundle.js在根目录下，需要需改html引入
<script src="/bundle.js"></script>
运行，出现一个web服务，在src目录能打开。
自动生成根目录预览页面
npm install html-webpack-plugin -D
在webpack头部配置插件，在plugins加载插件
const HtmlWebPlugin =require(‘html-webpack-plugin‘) //导入生成预览页面插件 const htmlPlugin = new HtmlWebPlugin({ //创建插件实例 template:‘./src/index.html‘, //要复制的模板文件 filename:‘index.html‘ //生成后的文件名称，在内存中。 })
//插件，用于生产模板和各项功能 plugins:[ htmlPlugin ] //打包用到的插件列表
loader加载器
css加载器，在src新建css目录，添加1.css 内容
li{ list-style: none; }
index.js 增加
import ‘./css/1.css‘
安装样式loader加载器
npm i style-loader css-loader -D
配置webpack.config.js
module: {//例如如何解读css,图片如何转换，压缩等
rules: [
{
test: /\.js$/, //匹配所有的js文件
exclude: /node_modules/,//除了node_modules以外
},
//配置css loaders
{ test: /\.css$/, use: [‘style-loader‘, ‘css-loader‘] },
{ test: /\.less$/, use: [‘style-loader‘, ‘css-loader‘, ‘less-loader‘] },
{ test: /\.scss$/, use: [‘style-loader‘, ‘css-loader‘, ‘sass-loader‘] }
]
},
运行npm run dev 列表样式已经生效
备注：scss less 能正常使用还需要安装,
npm i less-loader less -D
npm i sass-loader node-sass -D
poscss解决css兼容性问题
html增加 <input type="text" placeholder="ceshi">
1.css增加
在google下浏览字体变红，在ie下无效果。解决兼容办法如下
npm i postcss-loader autoprefixer -D
在根目录创建postcss.config.js 配置文件，并初始化如下代码
const autoprefixer =require(‘autoprefixer‘) module.exports={ plugins:[autoprefixer] }
在webpack.config.js修改css loader，调用
{ test: /\.css$/, use: [‘style-loader‘, ‘css-loader‘,‘postcss-loader‘] }
打包图片和字体
npm i url-loader file-loader -D
{ test: /\.jpg|png|gif|bmp$/, use:[‘url-loader?limt=100000000‘]}
npmrun
标签：运行 出现 const es6 import ini 自动生成 模板 charset
原文地址：https://www.cnblogs.com/dxh0535/p/12286139.html
