Vue学习笔记-1:windows下webpack安装使用
发布于 3个月前 作者 yetianyue 452 次浏览 来自 分享

Vue学习笔记-1:windows下webpack安装使用

先安装好node.js

https://nodejs.org/en/download/

需要的版本库

extract-text-webpack-plugin@3.0.2 
webpack@3.1.0 
webpack-dev-server@2.11.2
css-loader
style-loader

由于国内限制,添加淘宝NPM镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

或者添加npm到全局(后面用npm替代cnpm)

npm config set registry https://registry.npm.taobao.org 

创建一个目录,并进入这个目录,初始化项目,一直回车即可

cnpm init 

以管理员身份打开CMD命令行,全局安装

cnpm install webpack@3.1.0 -g
cnpm install webpack-dev-server@2.11.2 -g

局部安装所需要的插件

cnpm install extract-text-webpack-plugin@3.0.2 --save-dev
cnpm install css-loader --save-dev
cnpm install style-loader --save-dev

生成的package.json内容,script内容增加一行启动命令

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --host 127.0.0.1 --port 8888 --config webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.10",
    "extract-text-webpack-plugin": "^3.0.2",
    "style-loader": "^0.20.2",
    "webpack": "^3.1.0"
  }
}

配置文件webpack.config.js

var path = require('path');
//导入插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var config = {
    //入口
    entry:{
        main:'./main.js'
    },
    //出口
    output:{
        path:path.join(__dirname,'./dist'),
        publicPath:'/dist/',
        filename:'main.js'
    },
    //module对象中rule可以加载一些列的loader是,每个loader包含test,use。
    //test 匹配 import或者require中包含规则的文件,use通过style-loader转化
    module:{
        rules:[
            // {
            //  test:/\.css$/,
            //  use:[
            //      'style-loader',
            //      'css-loader'
            //  ]
            // },
            {
                test:/\.css$/,
                use:ExtractTextPlugin.extract({
                    use:'css-loader',
                    fallback:'style-loader'
                })
            }
        ]
    },
    plugins:[
        //重命名后提取后的css文件
        new ExtractTextPlugin('main.css')
    ]
}
module.exports = config;

创建main.js内容

import './style.css'
var app = document.getElementById('app');
app.innerHTML = "Hello Webpack !";

style.css 内容

#app{
    font-size: 24px;
    color: #f50;
}

index.html内容

<!DOCTYPE html>
<html>
<head>
    <title>Webpack App</title>
    <link rel="stylesheet" type="text/css" href="/dist/main.css">
</head>
<body>
    <div id="app">
        Hello world !
    </div>
    <script type="text/javascript" src="/dist/main.js"></script>
</body>
</html>

运行webpack-dev-server(webpack-dev-server --host 127.0.0.1 --port 8888 --config webpack.config.js)

npm run dev 

webpack3 css代码分离报错。找不到webpack/lib/Chunk

需要注入依赖

cnpm install webpack@3.1.0 --save-dev

启动

npm run dev 

浏览器访问http://127.0.0.1:8888

回到顶部